1. 首頁
  2. 問答
  3. SVG Spin Gear without Javascript

SVG Spin Gear without Javascript

2013-07-09 69 views
2

我在Inkscape中製作了一個生鏽的裝備。我怎樣才能讓齒輪像旋轉輪一樣旋轉而不使用Javascript。我想這個SVG文件只包含SVG代碼。我可以手動編程SVG或使用Inkscape來製作動畫。這是我的代碼。齒輪繞着一些中心旋轉，但我希望它旋轉到位。SVG Spin Gear without Javascript

<?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>

來源

2013-07-09 Devyn Collier Johnson

+0

這個問題有什麼問題？ –

回答

1

我想出了我的問題。齒輪位於1200x1200圖像的中心。我的中心點是600x600。在動畫標籤中，我使用0x0作爲中心。

來源

2013-07-10 01:01:33

相關問題

 相關問題