J'essaie de basculer l'étiquette SVG horizontalement en utilisant transform: scaleX(-1) transform: scaleX(-1) il passe mais sortez de l'écran (ou en train de sortir de l'écran (ou je ne suis pas sûr, je ne suis pas sûr) même si je donne le transform-origin: center; alors qu'est-ce qui se passe sur j'ai cherché mais il n'a pas eu la bonne réponse. Quelqu'un peut-il me dire pourquoi son événement et comment le réparer que l'étiquette d'utilisation SVG bascule sur son propre axe?

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
}
.container{
   width:100%;
}
.header{
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    width:90%;
    margin:auto;
}
.site-title{
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    margin-right:2em;
    width:45%;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
.nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
.nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
.hero{
    height:40vh;
    font-family: poppins;
    
    
}
.hero-wrapper{
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-shrink: 0; 
    align-items:center;


}
.site-info{
        display: inline-block;
        width: 25em;
        line-height: 28px;
        opacity: 0;
     transform: translateY(20px);
     transition:2.5s;
}
.site-info-appear{
    opacity: 1;
    transform: translateY(0px);

}

.site-info-heading{
    font-size:3em;
    /* border: 2px solid rebeccapurple; */

}
.site-info-text{
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  /* border: 2px solid rebeccapurple; */

}
.site-info-btn{
    font-size:1.3em;
    border-radius:50px;
    padding:.3em .5em;
    border:none;
    background-color: #33BC00;
    color:white;
    margin-top: 19px;
    cursor: pointer;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    width:300px;
    height:300px;


}
svg{
    border:2px solid red;
     width:155%;
     height:25em;
     float:left;
    position:static;
    top:0px;
    left:0;
 
}
/* HERE IS THE SVG USE TAG CLASS*/
.newCreatedBeeComingFromHive{
    transition: 8s linear;
    transform-origin:center;
    /*You can check by manipulating scaleX to -1 the bee will Vanish*/
    transform: scaleX(1);
}


#small-wing{
     animation: check .09s infinite alternate ;
      
}
#large-wing{
    animation: check .09s infinite alternate ;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-.4deg);

    }
    100%{
        transform: rotate(.4deg);

    }
}
.small-wing{
     animation: check .09s infinite alternate ;
    transform-origin: center;
      
}
.large-wing{
    animation: check .09s infinite alternate ;
    transform-origin: center;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-2.5deg);
    transform-origin: center;


    }
    100%{
        transform: rotate(2.5deg);

    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <title>Document</title>
</head>

<body>
    <div class="container">

        <div class="header">
            <!--header open-->
            <div class="header-wrapper">
                <div class="site-title">
                    <p>

                        <span class="site-title-span">B</span>ee
                        <span class="site-title-span">B</span>uzz
                    </p>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#" class="active">HOME</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">ABOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--header closed-->


        <!-- HERO SECTION  -->
        <div class="hero">
            <div class="hero-wrapper">

                <div class="site-info">
                    <h1 class="site-info-heading">
                        <span style="color:#E47700;font-weight:bolder;">B</span>ee
                        <span style="color:#E47700;font-weight:bolder;">B</span>uzz
                        <span style="font-size:.5em;">TM</span>
                    </h1>
                    <p class="site-info-text">
                        We are providing pure
                        forest bee honey and
                        protecting our environment
                    </p>
                    <button class="site-info-btn">
                        Read more
                    </button>
                </div>

                <div class="hero-beehive">

                    <svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">


                        <symbol id="theBee" viewBox="0 0 78 49" >
                            <g id="complete_bee">
                              <path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
                              <circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
                              <path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
                              <path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
                              <path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />
                          
                              <path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />
                          
                              <path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
                              <path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />
                          
                              <path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
                              <path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
                              <circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
                              <circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
                              <path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
                            </g>
                          </symbol>
                    </svg>

                </div>


               
            


            </div>

        </div>
 
     







           
  <svg>
        <use xlink:href="#theBee" class="newCreatedBeeComingFromHive"
        width="400" height="38.4" x="-30" y="290" />
           
    </svg>
    
</body>

</html>
0
Shayan Kanwal 6 mai 2021 à 21:02

1 réponse

Meilleure réponse

La largeur SVG est fixée à 155%, ce qui signifie qu'il est plus large de 55% que la zone de vue, lorsque vous retournez l'image, elle se termine vers l'extérieur de la zone de vue.

Définissez votre largeur SVG à 100%:

/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); */

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
}
.container{
   width:100%;
}
.header{
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.8em 0em;
    width:90%;
    margin:auto;
}
.site-title{
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    margin-right:2em;
    width:45%;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
.nav ul li a {
    text-decoration: none;
 color:black;
  font-weight: 500;
  padding:6px;
}
.nav ul li a:hover{
    color:white;
    background:#FEBD33;
    border-radius:50px;
    transition: .3s all ease;
}
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
.hero{
    height:40vh;
    font-family: poppins;
    
    
}
.hero-wrapper{
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-shrink: 0; 
    align-items:center;


}
.site-info{
        display: inline-block;
        width: 25em;
        line-height: 28px;
        opacity: 0;
     transform: translateY(20px);
     transition:2.5s;
}
.site-info-appear{
    opacity: 1;
    transform: translateY(0px);

}

.site-info-heading{
    font-size:3em;
    /* border: 2px solid rebeccapurple; */

}
.site-info-text{
  font-size: 25px;
  font-weight: 600;
  margin-top: 6px;
  /* border: 2px solid rebeccapurple; */

}
.site-info-btn{
    font-size:1.3em;
    border-radius:50px;
    padding:.3em .5em;
    border:none;
    background-color: #33BC00;
    color:white;
    margin-top: 19px;
    cursor: pointer;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    width:300px;
    height:300px;


}
svg{
    border:2px solid red;
     width:100%; /* changed */
     height:25em;
     float:left;
    position:static;
    top:0px;
    left:0;
 
}
/* HERE IS THE SVG USE TAG CLASS*/
.newCreatedBeeComingFromHive{
    transition: 8s linear;
    transform-origin:center;
    /*You can check by manipulating scaleX to -1 the bee will Vanish*/
    transform: scaleX(-1);
}


#small-wing{
     animation: check .09s infinite alternate ;
      
}
#large-wing{
    animation: check .09s infinite alternate ;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-.4deg);

    }
    100%{
        transform: rotate(.4deg);

    }
}
.small-wing{
     animation: check .09s infinite alternate ;
    transform-origin: center;
      
}
.large-wing{
    animation: check .09s infinite alternate ;
    transform-origin: center;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-2.5deg);
    transform-origin: center;


    }
    100%{
        transform: rotate(2.5deg);

    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>


    <title>Document</title>
</head>

<body>
    <div class="container">

        <div class="header">
            <!--header open-->
            <div class="header-wrapper">
                <div class="site-title">
                    <p>

                        <span class="site-title-span">B</span>ee
                        <span class="site-title-span">B</span>uzz
                    </p>
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#" class="active">HOME</a></li>
                        <li><a href="#">SERVICES</a></li>
                        <li><a href="#">CONTACT</a></li>
                        <li><a href="#">ABOUT</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--header closed-->


        <!-- HERO SECTION  -->
        <div class="hero">
            <div class="hero-wrapper">

                <div class="site-info">
                    <h1 class="site-info-heading">
                        <span style="color:#E47700;font-weight:bolder;">B</span>ee
                        <span style="color:#E47700;font-weight:bolder;">B</span>uzz
                        <span style="font-size:.5em;">TM</span>
                    </h1>
                    <p class="site-info-text">
                        We are providing pure
                        forest bee honey and
                        protecting our environment
                    </p>
                    <button class="site-info-btn">
                        Read more
                    </button>
                </div>

                <div class="hero-beehive">

                    <svg id="hero-svg" width="300" height="300" viewBox="0 50 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">


                        <symbol id="theBee" viewBox="0 0 78 49" >
                            <g id="complete_bee">
                              <path id="bee head" d="M11.553 35.5047C16.3904 38.8245 21.8681 37.8364 24.0023 36.4532V15.1115C22.9352 14.4397 19.5917 13.499 14.7542 15.1115C9.9168 16.724 8.37329 20.5655 7.99604 21.7512C6.88944 25.2291 6.71554 32.1848 11.553 35.5047Z" fill="#FFE818" stroke="black" />
                              <circle id="bee eye" cx="15.532" cy="21.6908" r="2.96412" fill="#313131" />
                              <path id="bee trunk" d="M65.8034 15.1697C45.3154 7.5816 30.1154 12.008 23.9501 15.1697V36.6299C37.3242 43.649 56.6739 38.0527 64.1435 34.3772C78.0156 27.5513 77.7785 19.6049 65.8034 15.1697Z" fill="#FFE818" stroke="black" />
                              <path id="trunk lines" d="M32.961 12.087C30.4711 16.1577 26.9142 26.5519 32.3682 39.3569L35.8065 39.8312C29.8309 27.5004 34.2652 15.5649 36.7551 11.4942L32.961 12.087Z" fill="#4E4E4E" stroke="black" />
                              <path id="trunk lines_2" d="M42.9204 39.8312C36.9447 27.5005 41.2605 15.0907 43.7503 11.02L47.7815 11.1385C45.2917 15.2092 40.5017 27.1448 46.4773 39.4755L42.9204 39.8312Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_3" d="M53.947 38.0527C47.2667 27.313 51.8749 15.6325 54.6584 12.087L58.3339 12.7984C55.5504 16.3439 50.8236 26.246 57.504 36.9856L53.947 38.0527Z" fill="#313131" stroke="black" />
                              <path id="trunk lines_4" d="M63.7528 34.6143C56.6849 26.8661 61.298 16.5925 64.38 14.6955L67.5819 15.8811C65.3292 18.6081 61.4051 23.9435 66.3963 33.1916L63.7528 34.6143Z" fill="#313131" stroke="black" />
                          
                              <path id="small-wing" d="M61.4166 1.06052C55.8203 0.206853 39.1659 8.60919 32.6053 12.0871C54.3264 11.3283 59.9938 9.00435 61.4166 8.05583C63.2303 6.8467 67.0128 1.91419 61.4166 1.06052Z" fill="#99CEFF" stroke="black" />
                          
                              <path id="large-wing" d="M32.9609 11.9685C48.0977 7.26541 80.3166 -2.14073 74.6957 7.34446C68.7675 14.5769 44.3036 13.6679 32.9609 11.9685Z" fill="#81D1FE" stroke="black" />
                              <path id="bee sting" d="M70.4275 30.7017L73.273 27.7376L76 32.7173L70.4275 30.7017Z" fill="#313131" stroke="black" />
                          
                              <path id="antenna" d="M13.1606 15.8811C13.4768 12.6008 12.1173 5.73197 4.14972 4.4989M10.3151 17.8967C9.36656 14.4583 6.09418 8.05584 0.592773 9.95288" stroke="black" />
                              <path id="bee legs" d="M30.3525 39.1198L26.2028 43.151L28.2184 46.2337M35.6879 39.9497L31.7753 44.5738L34.2652 48.605" stroke="black" />
                              <circle id="antenna ball" cx="4.38689" cy="4.38033" r="0.592824" fill="#FFE818" />
                              <circle id="antenna ball_2" cx="0.592824" cy="9.83431" r="0.592824" fill="#FFE818" />
                              <path id="bee behind legs" d="M49.2044 39.2384L45.6475 43.6253L47.6631 45.9965M55.4883 37.8156L50.8643 43.6253L55.4883 46.8265" stroke="black" />
                            </g>
                          </symbol>
                    </svg>

                </div>


               
            


            </div>

        </div>
 
     







           
  <svg>
        <use xlink:href="#theBee" class="newCreatedBeeComingFromHive"
        width="400" height="38.4" x="-30" y="290" />
           
    </svg>
    
</body>

</html>
1
vanowm 7 mai 2021 à 02:08