css - 如何使用 CSS3 为 SVG 的特定部分制作动画？-6ren

css - 如何使用 CSS3 为 SVG 的特定部分制作动画？

转载作者：行者123 更新时间：2023-11-28 16:01:01

我不太熟悉在 HTML 中嵌入 SVG 的动画，但这是我尝试做的。

我的网站上有一张 SVG 图片，如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
<style type="text/css">
 .st0{fill:#735545;}
.st1{fill:#5C4033;}
.st2{fill:none;}
.st3{fill:#3E3E48;}
.st4{fill:#2D2E39;}
.st5{fill:#BAB9B5;}
.st6{fill:#A3A2A1;}
.st7{fill:#CFCDC6;}
.st8{fill:#E0E0DC;}
.st9{fill:#E64D3C;}
.st10{fill:#CC3E36;}
.st11{fill:#C9C3BB;}
.st12{fill:#B0A79A;}
.st13{fill:#B5AEA4;}
.st14{fill:#E1CBB9;}
.st15{fill:#CDAE98;}
.st16{fill:#CB8E7E;}
.st17{fill:#B27669;}
.st18{fill:#393631;}
.st19{fill:#484642;}
.st20{fill:#F0C419;}
.st21{fill:#F29D1F;}
.st22{fill:#E57E25;}
.st23{fill:#D15627;}
.st24{fill:#C03B2B;}
</style>
<title>molay</title>
<g>
<g>
    <g>
        <polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0          "/>
        <polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6          "/>
    </g>
    <g>
        <g>
            <polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8                 "/>
            <polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8                 "/>
            <polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1                 "/>
            <polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6                 "/>
            <polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8               "/>
            <polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5 
                47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9 
                61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5                 "/>
            <polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1 
                74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8 
                68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8                "/>
            <polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1 
                47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5 
                61.8,104.9 57.7,104.9               "/>
            <polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5 
                76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9 
                61.9,104.9 61.8,104.9 61.8,133.5                "/>
        </g>
        <g>
            <g>
                <g>
                    <polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8 
                        69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5                         "/>
                    <polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1                         "/>
                    <polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9 
                        58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8                         "/>
                </g>
                <g>
                    <polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2 
                        74.4,48.2 74.4,43.7                         "/>
                    <path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z"/>
                    <path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
                        L72.9,55.3z"/>
                </g>
            </g>
            <g>
                <polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4                   "/>
                <polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8                   "/>
                <polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1                   "/>
                <polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1                   "/>
                <polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55                     "/>
                <polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1                     "/>
            </g>
        </g>
    </g>
   </g>

   <g>



     <g>
        <g>
            <polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8 
                11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8                 "/>

            <polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8 
                61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8                "/>
        </g>
        <g>
            <polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9 
                11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9                 "/>
            <polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146 
                61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9                "/>
        </g>
        <g>
            <polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1 
                28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1                 "/>
            <polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1 
                61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1                 "/>
        </g>
    </g>




    <polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3         "/>
    <polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3         "/>
    <polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9      "/>
    <polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9       "/>
</g>

我尝试使用 animate.css 为“g”括号内的某些部分设置动画。所以我会把它们包裹在一个...

 <section class="wow animated fadeInLeft"> 
 </section>

但它没有用，所以很明显我做的完全错了。我希望 .svg 的某个部分开始脉动(因此无限放大和缩小)。以下部分...

        <g>
          <g>
            <polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8 
                11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8                 "/>

            <polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8 
                61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8                "/>
        </g>
        <g>
            <polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9 
                11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9                 "/>
            <polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146 
                61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9                "/>
        </g>
        <g>
            <polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1 
                28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1                 "/>
            <polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1 
                61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1                 "/>
        </g>
    </g>

我可以执行什么代码来使 svg 组的那部分脉动进出。感谢您的帮助。

最佳答案

您根本不必添加任何包装器元素。只需将 animate.css 特定类添加到包装器 g 元素中，就像下面的代码片段一样，它就会起作用。

您需要做的另一件事是为动画 g 元素设置 transform-origin。我根据 g 元素的坐标将其设置为右下角。

.animated {
  transform-origin: 61.6px 219.1px;
  animation-iteration-count: infinite;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 125 219.1" style="enable-background:new 0 0 125 219.1;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      fill: #735545;
    }
    .st1 {
      fill: #5C4033;
    }
    .st2 {
      fill: none;
    }
    .st3 {
      fill: #3E3E48;
    }
    .st4 {
      fill: #2D2E39;
    }
    .st5 {
      fill: #BAB9B5;
    }
    .st6 {
      fill: #A3A2A1;
    }
    .st7 {
      fill: #CFCDC6;
    }
    .st8 {
      fill: #E0E0DC;
    }
    .st9 {
      fill: #E64D3C;
    }
    .st10 {
      fill: #CC3E36;
    }
    .st11 {
      fill: #C9C3BB;
    }
    .st12 {
      fill: #B0A79A;
    }
    .st13 {
      fill: #B5AEA4;
    }
    .st14 {
      fill: #E1CBB9;
    }
    .st15 {
      fill: #CDAE98;
    }
    .st16 {
      fill: #CB8E7E;
    }
    .st17 {
      fill: #B27669;
    }
    .st18 {
      fill: #393631;
    }
    .st19 {
      fill: #484642;
    }
    .st20 {
      fill: #F0C419;
    }
    .st21 {
      fill: #F29D1F;
    }
    .st22 {
      fill: #E57E25;
    }
    .st23 {
      fill: #D15627;
    }
    .st24 {
      fill: #C03B2B;
    }
  </style>
  <title>molay</title>
  <g>
    <g>
      <g>
        <polygon class="st0" points="37.5,8.7 37.5,201.1 61.8,201.1 61.8,0          " />
        <polygon class="st1" points="61.8,0 61.8,201.1 86.2,201.1 86.2,7.6          " />
      </g>
      <g>
        <g>
          <polygon class="st2" points="94,86.4 67.5,98.1 61.8,100.6 86.2,89.8                 " />
          <polygon class="st3" points="53,74.6 35.9,81.9 29.7,86.4 56.2,98.1 61.8,100.6 61.8,75.8                 " />
          <polygon class="st4" points="94,86.4 87.8,81.9 70.7,74.6 61.8,75.8 61.8,100.6 67.5,98.1                 " />
          <polygon class="st5" points="103.3,102.3 94,86.4 86.2,89.8 86.2,141.2 100,128.6                 " />
          <polygon class="st6" points="29.7,86.4 20.5,102.3 23.7,128.6 37.5,141.2 37.5,89.8               " />
          <polygon class="st7" points="57.7,133.5 55.6,133.5 58.1,131.8 59.7,128.6 59.8,121.3 52.5,121.4 49.3,123 47.6,125.5 
                47.6,123.4 47.6,119.2 47.6,115.1 47.6,113 49.3,115.4 52.5,117.1 59.8,117.2 59.7,109.9 58.1,106.7 55.6,104.9 57.7,104.9 
                61.8,104.9 61.8,100.6 37.5,89.8 37.5,141.2 37.5,166.6 61.8,175.4 61.8,133.5                 " />
          <polygon class="st8" points="61.8,100.6 61.8,104.9 61.9,104.9 66,104.9 68.1,104.9 65.7,106.7 64,109.9 63.9,117.2 71.2,117.1 
                74.4,115.4 76.1,113 76.1,115.1 76.1,119.2 76.1,123.4 76.1,125.5 74.4,123 71.2,121.4 63.9,121.3 64,128.6 65.7,131.8 
                68.1,133.5 66,133.5 61.9,133.5 61.8,133.5 61.8,175.4 86.2,166.6 86.2,141.2 86.2,89.8                " />
          <polygon class="st9" points="55.6,104.9 58.1,106.7 59.7,109.9 59.8,117.2 52.5,117.1 49.3,115.4 47.6,113 47.6,115.1 
                47.6,119.2 47.6,123.4 47.6,125.5 49.3,123 52.5,121.4 59.8,121.3 59.7,128.6 58.1,131.8 55.6,133.5 57.7,133.5 61.8,133.5 
                61.8,104.9 57.7,104.9               " />
          <polygon class="st10" points="61.9,133.5 66,133.5 68.1,133.5 65.7,131.8 64,128.6 63.9,121.3 71.2,121.4 74.4,123 76.1,125.5 
                76.1,123.4 76.1,119.2 76.1,115.1 76.1,113 74.4,115.4 71.2,117.1 63.9,117.2 64,109.9 65.7,106.7 68.1,104.9 66,104.9 
                61.9,104.9 61.8,104.9 61.8,133.5                " />
        </g>
        <g>
          <g>
            <g>
              <polygon class="st11" points="81.6,72.8 81.6,65.9 78.1,59.3 78.1,54.7 74.4,43.8 61.8,43.8 61.8,84.1 62.8,88.6 65.4,89.8 
                        69.1,87.9 70.2,83.1 70.2,74.8 84.5,80.5                         " />
              <polygon class="st12" points="53.5,83.1 54.6,87.9 53.5,83.1                         " />
              <polygon class="st13" points="49.3,43.8 45.7,54.7 45.7,59.3 42.1,65.9 42.1,72.8 39.2,80.5 53.5,74.8 53.5,83.1 54.6,87.9 
                        58.3,89.8 60.9,88.6 61.8,84.1 61.8,43.8                         " />
            </g>
            <g>
              <polygon class="st14" points="71.2,40.3 74.4,43.8 74.4,48.3 72.9,55.3 72.7,59.3 69,67.6 69,67.6 72.7,59.2 72.9,55.2 
                        74.4,48.2 74.4,43.7                         " />
              <path class="st14" d="M55.8,38.5l-3.4,1.7l-3.2,3.6v4.5l1.5,7l0.2,4l3.7,8.4c0,0,4.5-3,4.6-3l2.6-0.1V37.3L55.8,38.5z" />
              <path class="st15" d="M72.9,55.3l1.5-7v-4.5l-3.1-3.5l-3.4-1.7l-6-1.2v27.3v0.1l2.6,0.1c0.2,0,4.5,2.9,4.5,2.9l0-0.1l3.7-8.3
                        L72.9,55.3z" />
            </g>
          </g>
          <g>
            <polygon class="st16" points="59.2,64.7 61.8,66.8 64.5,64.7 61.8,59.4                   " />
            <polygon class="st17" points="61.8,59.4 59.2,64.7 61.8,66.8 61.8,66.8                   " />
            <polygon class="st18" points="52.6,52.4 53.5,51.3 58.6,49.3 59.7,50.1                   " />
            <polygon class="st19" points="56.1,55.5 54.5,55.1 55.1,54.4 57,54.4 57.7,55.1                   " />
            <polygon class="st19" points="67.6,55.4 66.1,55 66.7,54.3 68.6,54.3 69.2,55                     " />
            <polygon class="st18" points="71.1,52.4 70.2,51.3 65.1,49.3 64,50.1                     " />
          </g>
        </g>
      </g>
    </g>

    <g>



      <g class='animated pulse'>
        <g>
          <polygon class="st20" points="50,141.8 53.2,131.6 37.7,138.8 45.4,155.8 37.3,163.5 30.8,159 29.2,145.6 0,144.3 17.3,155.8 
                11.2,174.4 25.3,203.7 61.6,214.9 61.6,155.8                 " />

          <polygon class="st21" points="123.3,144.3 94.1,145.6 92.5,159 85.9,163.5 77.8,155.8 85.6,138.8 70.1,131.6 73.2,141.8 
                61.6,155.8 61.6,214.9 98,203.7 112.1,174.4 106,155.8                " />
        </g>
        <g>
          <polygon class="st22" points="50,146 53.2,135.8 37.7,142.9 45.4,159.9 37.3,167.6 30.8,163.2 29.2,149.8 0,148.4 17.3,159.9 
                11.2,178.6 25.3,207.9 61.6,219.1 61.6,159.9                 " />
          <polygon class="st23" points="123.3,148.4 94.1,149.8 92.5,163.2 85.9,167.6 77.8,159.9 85.6,142.9 70.1,135.8 73.2,146 
                61.6,159.9 61.6,219.1 98,207.9 112.1,178.6 106,159.9                " />
        </g>
        <g>
          <polygon class="st9" points="54,171 56.1,164.3 45.9,169 51,180.1 45.7,185.2 41.4,182.3 40.3,173.5 21.1,172.6 32.5,180.1 
                28.4,192.4 37.7,211.7 61.6,219.1 61.6,180.1                 " />
          <polygon class="st24" points="102.2,172.6 83,173.5 81.9,182.3 77.6,185.2 72.3,180.1 77.4,169 67.2,164.3 69.3,171 61.6,180.1 
                61.6,219.1 85.6,211.7 94.8,192.4 90.8,180.1                 " />
        </g>
      </g>




      <polygon class="st21" points="107.6,135.1 125,128.1 107.6,131.3         " />
      <polygon class="st20" points="17.4,135.1 0,128.1 17.4,131.3         " />
      <polygon class="st20" points="10.8,122.9 13.8,126.6 15.6,122.9      " />
      <polygon class="st21" points="112.3,122.9 109.3,126.6 107.6,122.9       " />
    </g>
  </g>
</svg>

关于css - 如何使用 CSS3 为 SVG 的特定部分制作动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40144134/

文章推荐： css - 一行有两个复杂的 div 标签

文章推荐： javascript - AngularJS 在 ng-repeat 中添加条件类

文章推荐： javascript - 在标签内容之前插入动态创建的 div

svg - 用于将页内 SVG 代码下载为 SVG 文件的按钮？
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
svg - 如何将一个 SVG 元素的内容复制到另一个 SVG 元素并保持同步
有两个 SVG 元素( SVG1 和 SVG2 )，其中 SVG1 是一个包含各种元素的大区域，会不时添加、删除和重新定位。另一方面，SVG2 需要用作图标化表示(小) SVG1 的版本，非常小，但
svg - 如何在 svg 文档中以编程方式创建 svg 元素？
我知道我们可以使用 document.createElementNS("http://www.w3.org/2000/svg","line"); 创建一个嵌入到html页面。但是，这种方法似乎不适用
svg - 我正在尝试使用 flutter svg，但加载黑色 svg
我正在尝试使用 Flutter SVG 依赖项，我将 svg 放入 Assets 中，在 pubspec.yaml 中设置，并在我的小部件中设置，但是，使用黑色容器加载 svg 我已经尝试过更改 sv
svg - 为什么将
为什么这样的演示:http://jsbin.com/ejorus/2/edit，将元素嵌套在另一个元素内？ JS
svg - 如何将 svg 代码保存为 .svg 图像？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
svg - 在另一个 SVG 元素中响应地居中 SVG 元素？
我正在尝试在 SVG 中做一些非常简单的事情: 将整个视口(viewport)分成两个矩形每个矩形的宽度应为视口(viewport)宽度的 50% 每个矩形的高度应为视口(viewport)高度的
svg - 我如何将一个 SVG 置于另一个 SVG 中
我试图将 play svg 居中放置在 SVG 圆圈的中间，但似乎不知道该怎么做。垂直和水平。 https://jsfiddle.net/c0qshm0t/17/ 最
svg - 用另一个 SVG 形状填充 SVG 形状
是否可以使用一个 SVG 形状作为另一个形状的填充？最佳答案您想使用 SVG Pattern .见 this example : 注意
svg - SVG 中跨路径的渐变
我在 SVG 中有一个非常简单的路径。 (预览:https://i.imgur.com/nVnxcRg.png) 我想要
svg - 如何将形状优美的多边形转换为 SVG？
我可以通过以下方式创建多边形: #!/usr/bin/env python from shapely.geometry import Polygon area = Polygon(((52, 13),
svg - Webpack:无法使用文件加载器显示 SVG 图像(svg 解析错误)
我使用 require 的 SVG 没有显示。在我的终端中，svg Assets 被发出并且路径在我的 html 中正确设置。但是，SVG 不会显示，而其他格式(如 jpg 或 png)可以显示
svg - SVG 中的混合模式
我在 SVG 混合模式中遇到了问题。我在 SVG 中有四个路径，我想用公式组合它们:(1*2) + (3*4)，即路径 1 和路径 2 应该使用乘法模式混合，类似地路径 3 和路径 4 应该使用混合相
svg - SVG 支持多少级递归？
我无法超过 2 个级别。 (在 Iceweasel 和 Chromium 上尝试过。) 作为测试，我尝试了 this earlier reply 中提供的代码的变体。 .这个由 3 个单独的文件组成，
svg - svg 中的剪辑路径和变换组合
请引用以下组中的clip-path 组 ID -> “container_svg_symbolGroup1_0(即圆圈符号)在我删除图表中可见的剪辑路径时不可见。问题是什么？为什么
svg - svg 形状中的文本区域
使用联合 js 在 svg 中创建了一个文本区域。但是，我无法在文本区域中输入任何文本。如何使文本区域可编辑？代码: var graph = new joint.dia.Graph;
svg - svg 动画可以在不丢失累积信息的情况下暂停吗？
您可以不受限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。也许我应该用一个例子来澄清；拿这个动画: 如果我停止此动画，并开始影响同一对象旋转的不同动画(
svg - SVG、多条小路径和一条大路径哪个更有效？
如果我在浏览器中显示常规 SVG(作为独立文件或嵌入在 HTML 中)，在拥有大量单独的路径元素和一个巨大的路径元素之间在效率上是否有任何理论上的差异？我正在考虑将某种动画从一张图片变成一张完全不同
svg - SVG 中的海龟图形？
logo的turtlegraphics的svg路径中是否有等价物？而不是硬编码的 x 和 y 坐标，这也迫使我在移动更相对的“增量”方法时调整控制点。我的解决方案应该适用于 FOCS(Firefo
svg - SVG 图案中使用的圆帽线
目前正在使用 SVG 元素与一堆元素将使它具有一种逐渐变细的边缘。我尝试了很多不同的 CSS 样式来解决这个问题，但没有任何效果。这是一个带有针迹的圆圈的代码:

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 如何使用 CSS3 为 SVG 的特定部分制作动画？