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

【问题标题】：How to align SVG image on the both sides of the other SVGpath?如何在另一个 SVGpath 的两侧对齐 SVG 图像？
【发布时间】：2021-05-03 06:21:03
【问题描述】：

我正在尝试在 HTML CSS 和 JS 中制作一个动画，其中蜜蜂可以带着蜂巢的一部分飞翔，当我想要下面蜂巢两端的蜜蜂时，问题就来了（粉红色代表蜜蜂，其余的它们代表蜂巢片，这是为了理解而不是实际标记。代码附在图片下方）因为我为它们中的每一个都使用 SVG，每个蜂巢片都作为 SVG 路径，蜜蜂是完整的 SVG 图像，我不知道如何在两端显示带有蜜蜂的蜂箱片我尝试使用 display: flex;但它不起作用 谁能告诉我该怎么做？代码是

这里是带有 SVG 元素的 HTML 和 CSS，我已经评论了 HTML 中的每一个蜂箱

/* @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>

提前致谢

【问题讨论】：

    标签： javascript html css svg


    【解决方案1】：

    因为你会经常使用它，所以我会在符号中更改蜜蜂。请注意，该符号与您的 svg 具有相同的 viewBox。

    在下一个示例中，我只使用中间的“片”。

    您需要知道作品的边界框。您可以使用 javascript 中的 getBBox() 方法获取它。在这种情况下，该方法将返回此片段：

    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>

    【讨论】：

    • 非常感谢您的回答，我是否知道，既然您已经为蜜蜂使用了 标签，那么我可以通过这样做来为蜜蜂的翅膀设置动画，如果这个问题似乎对你有用，你可以投票，因为我最近从 qustion 禁令中恢复过来
    • 您可以为符号内部的翅膀设置动画，然后所有符号都将具有动画翅膀。我已经对你的问题投了赞成票
    • 非常感谢这个答案真的很有帮助
    • 你能回答我的另一个 Javascript 问题吗stackoverflow.com/questions/67433538/… 看起来很复杂
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-06-08
    • 2013-02-28
    • 1970-01-01
    • 2020-05-02
    • 2016-06-14
    • 2020-09-23
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode