个人中心
gpt4 book ai didi

javascript - 如何在另一个SVGpath的两侧对齐SVG图像？

转载 作者：行者123 更新时间：2023-12-04 07:42:50 24 4
gpt4 key购买 nike

我正在尝试用 HTML CSS 和 JS 制作一个动画，其中蜜蜂可以带着 hive 的一块飞翔，当我想要下面 hive 两端的蜜蜂时，问题就出现了(粉红色代表蜜蜂，其余的代表 hive -pieces，这是为了理解而不是实际的标记。代码附在图像下方)因为我为它们中的每一个使用 SVG，并且每个 hive 块都用作 SVG 路径，蜜蜂是完整的 SVG 图像，我不知道如何显示两端带有蜜蜂的 hive 片 我试图通过使用 display: flex; 来做到这一点。但它不起作用
谁能告诉我怎么做？代码是
In pink color represents bees and rest of them represents hive
这是带有 SVG 元素的 HTML 和 CSS，我已经对 HTML 中的每个 hive 进行了评论

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


*,::before,::after{
 margin:0;
 padding:0;
 box-sizing: border-box;   
}
body{
    font-family:Roboto ;
}
/* .container{
    border:2px solid black;  
    padding:10px;
} */
.header{
    /* border:2px solid rgb(255, 179, 0); */
    width:100%;
    padding:.5em .5em;
}
.header-wrapper{
    display:flex;
    align-items: center;
    justify-content:space-between;
    padding:.5em 1.5em;
    /* border:2px solid blue; */
    width:90%;
    margin:auto;
}
.site-title{
  /* border: 2px solid red; */
  margin-left: 2em;
  font-size:2.3em;
  font-weight:400;
    

}
.site-title-span{
    font-weight:750;
    color:#E47700;
}
.nav{
    /* border:2px solid magenta; */
    margin-right:2em;
    /* align-self: flex-end; */
    width:45%;
}
.nav ul{
 display: flex;
 list-style: none;
 font-size:1.5em;
 justify-content: space-between;
}
/* .nav ul li{
  margin-right:1.5em;
} */
.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 ease;
}
/* GO AND DO IT IN JS */
.active{
    border-radius:50px;
    background-color: #FEBD33;
    color: white;
    padding:0 12px;
}
.hero{
    border:2px solid red;
    height:100vh;
    font-family: poppins;
    
    
}
.hero-wrapper{
    /* border: 2px solid hotpink; */
    width:80%;
    margin:0 auto;
    margin-top:130px;
    display:flex;
    justify-content: space-between;
    align-items:center;


}
.site-info{
        /* position: relative;
        top: 155px;
        left: 10.9em; */
        display: inline-block;
        width: 25em;
        line-height: 28px;
        /* border: 2px solid rebeccapurple; */
}
.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;
    /* border: 2px solid rebeccapurple; */

}
.hero-beehive{
     position: relative;
     top: 0px;
     left:0px;
    /* right: 1em;  */
    /* display:inline-block; */
    width:300px;
    height:300px;
    border: 2px solid rebeccapurple;


}
svg{
    border:2px solid red;
     width:28.5em;
     height:25em;
     /* float:left; */
     /* margin-left:0; */
    /* display:inline-block; */
    position:static;
    top:0px;
    left:0;
    /* overflow: hidden; */
    
    /* float: right; */

}
#b-peice-1,#b-peice-2,#b-peice-3
#b-peice-4,#b-peice-5,#b-peice-6,
#b-peice-7{
    transform:translateY(px);
    position:absolute;
}



/* HONEY BEE WINGS FLYING ANIM */
#small-wing{
    /* anim`ation: small-wing 2s infinite alternate ; */
     animation: check .09s infinite alternate ;
     /* animation-name: check;
     animation-duration: 1s;
     animation-iteration-count: infinite; */
     /* transform: rotate(10deg); */
      
}
#large-wing{
    animation: check .09s infinite alternate ;
    
}
@keyframes check{
    0%{
    transform: rotate(0deg);
    }
    50%{
        transform: rotate(-3deg);

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

    }
}
.side-bees{
    display: flex;
    transform: rotate(50deg);
    width:250px;
}
<!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">


    <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 width="300" height="300" viewBox="15 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="beehive 1">
                            <g id="first-beehive-setm">
                            
                                <path id="hive-stem"
                                    d="M353 80C361.284 80 368 86.7157 368 95V97C368 105.284 361.284 112 353 112H15C6.71573 112 0 105.284 0 97V95C0 86.7157 6.71573 80 15 80H217.787C221.765 80 225.58 78.4196 228.393 75.6066L261.393 42.6066C267.251 36.7487 276.749 36.7487 282.607 42.6066L288.971 48.9706C292.853 52.8528 292.853 59.1472 288.971 63.0294C282.708 69.292 287.143 80 296 80H353Z"
                                    fill="#502601" />
                                <path id="leaft-up"
                                    d="M368 0L375.032 7.032C385.896 17.898 392 32.634 392 48C392 63.366 385.896 78.102 375.032 88.968L368 96L360.968 88.968C350.104 78.102 344 63.366 344 48C344 32.634 350.104 17.898 360.968 7.032L368 0Z"
                                    fill="#008100" />
                                <path id="leaf-side"
                                    d="M464 96L456.968 103.032C446.102 113.896 431.366 120 416 120C400.634 120 385.898 113.896 375.032 103.032L368 96L375.032 88.968C385.898 78.104 400.634 72 416 72C431.366 72 446.102 78.104 456.968 88.968L464 96Z"
                                    fill="#33BC00" />
                                <path id="anchor" d="M152 112H184V160H152V112Z" fill="#763A02" />
                            </g>
                              <!-- beehive piece -->
                            <path id="b-peice-7"
                                d="M112 432H232C240.837 432 248 439.163 248 448C248 456.837 240.837 464 232 464H112C103.163 464 96 456.837 96 448C96 439.163 103.163 432 112 432Z"
                                fill="#E47700" />
                                <!-- beehive piece -->
                            <path id="b-peice-6"
                                d="M72 384H272C285.255 384 296 394.745 296 408C296 421.255 285.255 432 272 432H72C58.745 432 48 421.255 48 408C48 394.745 58.745 384 72 384Z"
                                fill="#FF8800" />
                                <!-- beehive piece -->
                            <path id="b-peice-5"
                                d="M40 336C143.098 336 200.902 336 304 336C317.255 336 328 346.745 328 360C328 373.255 317.255 384 304 384H40C26.745 384 16 373.255 16 360C16 346.745 26.745 336 40 336Z"
                                fill="#FFA900" />
                                <!-- beehive piece -->
                            <path id="b-peice-4"
                                d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z"
                                fill="#FEBD33" />
                                <!-- beehive piece -->
                            <path id="b-peice-3"
                                d="M40 240H304C317.255 240 328 250.745 328 264C328 277.255 317.255 288 304 288H40C26.745 288 16 277.255 16 264C16 250.745 26.745 240 40 240Z"
                                fill="#FFA900" />
                                <!-- beehive piece -->
                            <path id="b-peice-2"
                                d="M72 192H272C285.255 192 296 202.745 296 216C296 229.255 285.255 240 272 240H72C58.745 240 48 229.255 48 216C48 202.745 58.745 192 72 192Z"
                                fill="#FF8800" />
                                <!-- beehive piece -->
                            <path id="b-peice-1"
                                d="M112 160H232C240.837 160 248 167.163 248 176C248 184.837 240.837 192 232 192H112C103.163 192 96 184.837 96 176C96 167.163 103.163 160 112 160Z"
                                fill="#E47700" />
                            <path id="beehive-gate"
                                d="M136 384H200V352C200 334.327 185.673 320 168 320C150.327 320 136 334.327 136 352V384Z"
                                fill="#763A02" />
                        </g>
                    </svg>


                </div>


               
            


            </div>

        </div>











        <!--END OF THE CONTAINER-->
    </div>
</body>

</html>

这是蜜蜂 SVG 

 <div class="svg">
                <svg width="78" height="49" viewBox="0 0 78 49" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <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>
                </svg>
            </div>

提前致谢

最佳答案

由于您会经常使用它，因此我会将蜜蜂更改为符号。请注意，该符号与您的 svg 具有相同的 viewBox。
在下一个示例中，我仅使用中间的“部分”。
您将需要知道作品的边界框。您可以使用 getBBox() 获得它javascript中的方法。在这种情况下，该方法为该作品返回此内容:

height: 48
width: 344
x: 0
y: 288
现在我可以像这样使用符号: 
<use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" />
我为 use 元素选择了 width="62.4"和 height="38.4"。这是保持蜜蜂的纵横比。
对于位置 y="288"与块边界框的 y 相同。至于 x，这是块边界框的 x + 相同的宽度。
对于另一边的蜜蜂，我想要一只反向蜜蜂，所以我正在缩放它 transform="scale(-1,1)"由于 x="0"并且转换发生在 x="0"点周围，因此我不需要此蜜蜂的 x 属性。 y="288"
关于 xlink:href 的观察:
不推荐使用属性 xlink:href: see MDN .如果你愿意，你可以使用 href 代替。我仍然将它用于较旧的浏览器。这是一个 article from css-tricks.com about xlink:href 

svg{border:solid}
<svg width="300" height="300" viewBox="-140 0 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>
  <g id="beehive 1">
    <!-- beehive piece -->

    <!-- beehive piece -->
    <path id="b-peice-4" d="M24 288H320C333.255 288 344 298.745 344 312C344 325.255 333.255 336 320 336H24C10.745 336 0 325.255 0 312C0 298.745 10.745 288 24 288Z" fill="#FEBD33" />
<!-- b-peice-4's bounding box
height: 48
width: 344
x: 0
y: 288-->
    
    
   
   <use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" />
   <use xlink:href="#theBee" width="62.4" height="38.4" transform="scale(-1,1)" y="288" />
    
    
  </g>
</svg>

关于javascript - 如何在另一个SVGpath的两侧对齐SVG图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67364324/

24 4 0
文章推荐： jQuery While 循环以在高度大于 X 时增加 Div 宽度
文章推荐： math - 在水库采样中重复使用随机数
文章推荐： javascript - 如何在不离开页面的情况下使用 AJAX 提交表单 HTML Formsubmit
文章推荐： c++ - 将 "*"作为输入参数 (argv) 处理时的 G++ 和 MSBuild 差异
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com