2

我在 Inkscape 中制作了一个生锈的齿轮。如何在不使用 Javascript 的情况下使齿轮像旋转的轮子一样旋转。我希望这个 SVG 文件只包含 SVG 代码。我可以手动编程 SVG 或使用 Inkscape 制作动画。这是我的代码。齿轮绕着某个中心旋转,但我希望它在原地旋转。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="1200"
   height="1200"
   id="svg2">
  <title
     id="title2993">Gear</title>
  <defs
     id="defs4">
    <filter
       y="-0.2"
       height="1.4"
       color-interpolation-filters="sRGB"
       id="filter3845">
      <feTurbulence
         baseFrequency="0.08"
         type="fractalNoise"
         seed="0"
         numOctaves="5"
         id="feTurbulence3847" />
      <feGaussianBlur
         result="result91"
         stdDeviation="0.5"
         id="feGaussianBlur3849" />
      <feDisplacementMap
         in2="result91"
         scale="20"
         xChannelSelector="R"
         yChannelSelector="G"
         in="SourceGraphic"
         result="result1"
         id="feDisplacementMap3851" />
      <feComposite
         in2="SourceGraphic"
         operator="atop"
         in="result1"
         result="fbSourceGraphic"
         id="feComposite3853" />
      <feColorMatrix
         id="feColorMatrix3889"
         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
         in="fbSourceGraphic"
         result="fbSourceGraphicAlpha" />
      <feMorphology
         in="fbSourceGraphic"
         result="result8"
         operator="dilate"
         radius="7"
         id="feMorphology3891" />
      <feComposite
         in2="result8"
         operator="arithmetic"
         k1="0.5"
         k2="0"
         k3="0.5"
         k4="0"
         in="fbSourceGraphic"
         result="result10"
         id="feComposite3893" />
      <feTurbulence
         baseFrequency="0.07"
         numOctaves="3"
         type="fractalNoise"
         result="result11"
         id="feTurbulence3895" />
      <feDisplacementMap
         in2="result11"
         scale="10"
         xChannelSelector="R"
         yChannelSelector="A"
         in="result10"
         result="result12"
         id="feDisplacementMap3897" />
      <feComposite
         in2="result12"
         operator="arithmetic"
         k1="0.25"
         k2="0.25"
         k3="0.75"
         k4="0"
         in="fbSourceGraphic"
         result="fbSourceGraphic"
         id="feComposite3899" />
      <feColorMatrix
         id="feColorMatrix3901"
         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
         in="fbSourceGraphic"
         result="fbSourceGraphicAlpha" />
      <feGaussianBlur
         stdDeviation="1"
         in="fbSourceGraphic"
         result="result0"
         id="feGaussianBlur3903" />
      <feTurbulence
         result="result1"
         numOctaves="4"
         seed="4"
         baseFrequency="0.057"
         type="turbulence"
         id="feTurbulence3905" />
      <feDisplacementMap
         in2="result1"
         scale="0"
         xChannelSelector="R"
         yChannelSelector="A"
         result="result91"
         id="feDisplacementMap3907" />
      <feComposite
         in2="result91"
         operator="out"
         in="result0"
         result="result2"
         id="feComposite3909" />
      <feComposite
         in2="result2"
         operator="arithmetic"
         k1="0.1"
         k2="0"
         k3="1.2"
         k4="0"
         in="fbSourceGraphicAlpha"
         result="result5"
         id="feComposite3911" />
      <feBlend
         in2="result5"
         mode="multiply"
         result="fbSourceGraphic"
         id="feBlend3913" />
      <feGaussianBlur
         result="result0"
         in="fbSourceGraphic"
         stdDeviation="3"
         id="feGaussianBlur3915" />
      <feSpecularLighting
         specularExponent="15"
         specularConstant="0.40000001"
         surfaceScale="3"
         lighting-color="#fee65d"
         result="result1"
         in="result0"
         id="feSpecularLighting3917">
        <fePointLight
           z="20000"
           y="-10000"
           x="-5000"
           id="fePointLight3919" />
      </feSpecularLighting>
      <feComposite
         in2="fbSourceGraphic"
         operator="in"
         in="result1"
         result="result2"
         id="feComposite3921" />
      <feComposite
         in2="result2"
         operator="arithmetic"
         k1="-1"
         k2="2.5"
         k3="3.5"
         k4="0"
         in="fbSourceGraphic"
         result="result4"
         id="feComposite3923" />
      <feBlend
         in2="result4"
         mode="multiply"
         id="feBlend3925" />
    </filter>
    <filter
       y="-0.2"
       height="1.4"
       color-interpolation-filters="sRGB"
       id="filter3845-3">
      <feTurbulence
         baseFrequency="0.08"
         type="fractalNoise"
         seed="0"
         numOctaves="5"
         id="feTurbulence3847-3" />
      <feGaussianBlur
         result="result91"
         stdDeviation="0.5"
         id="feGaussianBlur3849-1" />
      <feDisplacementMap
         in2="result91"
         scale="20"
         xChannelSelector="R"
         yChannelSelector="G"
         in="SourceGraphic"
         result="result1"
         id="feDisplacementMap3851-7" />
      <feComposite
         in2="SourceGraphic"
         operator="atop"
         in="result1"
         result="fbSourceGraphic"
         id="feComposite3853-4" />
      <feColorMatrix
         id="feColorMatrix3889-9"
         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
         in="fbSourceGraphic"
         result="fbSourceGraphicAlpha" />
      <feMorphology
         in="fbSourceGraphic"
         result="result8"
         operator="dilate"
         radius="7"
         id="feMorphology3891-3" />
      <feComposite
         in2="result8"
         operator="arithmetic"
         k1="0.5"
         k2="0"
         k3="0.5"
         k4="0"
         in="fbSourceGraphic"
         result="result10"
         id="feComposite3893-8" />
      <feTurbulence
         baseFrequency="0.07"
         numOctaves="3"
         type="fractalNoise"
         result="result11"
         id="feTurbulence3895-9" />
      <feDisplacementMap
         in2="result11"
         scale="10"
         xChannelSelector="R"
         yChannelSelector="A"
         in="result10"
         result="result12"
         id="feDisplacementMap3897-4" />
      <feComposite
         in2="result12"
         operator="arithmetic"
         k1="0.25"
         k2="0.25"
         k3="0.75"
         k4="0"
         in="fbSourceGraphic"
         result="fbSourceGraphic"
         id="feComposite3899-1" />
      <feColorMatrix
         id="feColorMatrix3901-3"
         values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
         in="fbSourceGraphic"
         result="fbSourceGraphicAlpha" />
      <feGaussianBlur
         stdDeviation="1"
         in="fbSourceGraphic"
         result="result0"
         id="feGaussianBlur3903-0" />
      <feTurbulence
         result="result1"
         numOctaves="4"
         seed="4"
         baseFrequency="0.057"
         type="turbulence"
         id="feTurbulence3905-4" />
      <feDisplacementMap
         in2="result1"
         scale="0"
         xChannelSelector="R"
         yChannelSelector="A"
         result="result91"
         id="feDisplacementMap3907-5" />
      <feComposite
         in2="result91"
         operator="out"
         in="result0"
         result="result2"
         id="feComposite3909-9" />
      <feComposite
         in2="result2"
         operator="arithmetic"
         k1="0.1"
         k2="0"
         k3="1.2"
         k4="0"
         in="fbSourceGraphicAlpha"
         result="result5"
         id="feComposite3911-3" />
      <feBlend
         in2="result5"
         mode="multiply"
         result="fbSourceGraphic"
         id="feBlend3913-4" />
      <feGaussianBlur
         result="result0"
         in="fbSourceGraphic"
         stdDeviation="3"
         id="feGaussianBlur3915-9" />
      <feSpecularLighting
         specularExponent="15"
         specularConstant="0.40000001"
         surfaceScale="3"
         lighting-color="#fee65d"
         result="result1"
         in="result0"
         id="feSpecularLighting3917-8">
        <fePointLight
           z="20000"
           y="-10000"
           x="-5000"
           id="fePointLight3919-4" />
      </feSpecularLighting>
      <feComposite
         in2="fbSourceGraphic"
         operator="in"
         in="result1"
         result="result2"
         id="feComposite3921-2" />
      <feComposite
         in2="result2"
         operator="arithmetic"
         k1="-1"
         k2="2.5"
         k3="3.5"
         k4="0"
         in="fbSourceGraphic"
         result="result4"
         id="feComposite3923-2" />
      <feBlend
         in2="result4"
         mode="multiply"
         id="feBlend3925-0" />
    </filter>
  </defs>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Gear</dc:title>
        <dc:date>July 9, 2013</dc:date>
        <dc:language>English</dc:language>
        <dc:creator>
          <cc:Agent>
            <dc:title>Devyn Collier Johnson</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title>Creative Commons Share-alike</dc:title>
          </cc:Agent>
        </dc:rights>
        <cc:license
           rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" />
      </cc:Work>
      <cc:License
         rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Reproduction" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#Distribution" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Notice" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#Attribution" />
        <cc:permits
           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
        <cc:requires
           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
      </cc:License>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <path
       d="m 570.9687,64.734359 c -36.61252,1.90463 -72.25464,7.48805 -106.5625,16.375 l -13.625,104.750001 c -31.37833,12.11451 -60.91033,27.94305 -88.0625,46.9375 l -96.6875,-52.6875 c -27.71546,22.00768 -53.1943,46.70506 -76.0625,73.6875 l 56.125,103.03125 c -15.62666,25.57539 -28.53197,52.9802 -38.375,81.8125 L 82.937455,454.85936 c -9.08954,32.32662 -15.22193,65.88468 -18.09375,100.375 l 122.749995,58.3125 c 2.57204,26.22735 7.58163,51.7195 14.8125,76.28125 l -105.187505,99.5 c 11.560445,30.69658 25.861415,60.06147 42.593755,87.78122 l 151.25,-28.24997 c 14.83722,16.58057 31.00892,31.95537 48.3125,45.96877 l -29.375,157.21867 c 26.38869,16.9357 54.37563,31.5838 83.65625,43.75 L 506.56245,976.45323 c 19.78378,4.5587 40.12085,7.6986 60.875,9.3124 l 71.03125,149.49997 c 31.6796,-2.2872 62.5832,-7.3537 92.5001,-14.9062 l 21.0938,-162.09367 c 20.0354,-7.906 39.2901,-17.328 57.6562,-28.125 l 139.9688,76.24987 c 24.2057,-20.90717 46.5194,-43.93997 66.6562,-68.81237 L 943.6876,804.26561 c 13.6428,-20.20157 25.5389,-41.69571 35.5,-64.21875 l 142.6874,-18.5625 c 7.3808,-31.964 11.8985,-65.00807 13.2813,-98.875 L 1014.3438,565.20311 C 1013.832,535.92741 1010.2819,507.4158 1004,479.92186 l 90.5626,-85.6875 c -13.4536,-32.29171 -29.9658,-62.98527 -49.1876,-91.71875 l -113.9062,21.28125 c -19.4899,-25.92424 -41.9496,-49.48954 -66.875,-70.1875 l 20.0625,-107.4375 C 854.5674,127.22609 822.4745,111.19005 788.75,98.453109 L 716.5313,174.79686 C 684.3067,165.37395 650.456,159.73765 615.49994,158.45311 L 570.96869,64.734359 z m 29.03125,281.687501 c 127.55215,0 230.96885,103.41669 230.96885,230.96875 0,127.55206 -103.4167,230.9375 -230.96885,230.9375 -127.55206,0 -230.96875,-103.38544 -230.96875,-230.9375 0,-127.55206 103.41669,-230.96875 230.96875,-230.96875 z"
       id="path2997"
       style="fill:#803300;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;filter:url(#filter3845-3)" />
       <animateTransform attributeName="transform" attributeType="XML" type="rotate" values="0 0 0; 45 0 0; 90 0 0; 135 0 0; 180 0 0; 225 0 0; 270 0 0; 315 0 0" begin="0s" dur="5s" additive="sum" repeatCount="indefinite"/>
  </g>
</svg>
4

1 回答 1

1

我想出了我的问题。齿轮位于 1200x1200 图像的中心。我的中心点是 600x600。在动画标签中,我使用 0x0 作为中心。

于 2013-07-10T01:01:33.707 回答