如何正确使用animateTransform cy值？

Question

我试图在svg中创建一个动画加载图标，尽管每当我在Chrome或Edge中检查结果时，旋转动画都不会对cx/cy值做出反应(只有当我将它们设置为零时，它才会被正确地旋转，否则会有一些swing)。

，我在Qt中使用QSvgWidget，下面的例子很好。我只想知道为什么它不能在Chrome上工作。

​

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   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"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="23mm"
   height="23mm"
   viewBox="0 0 23 23"
   version="1.1"
   id="svg8"
   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
   sodipodi:docname="loading_static.svg">
  <defs
 id="defs2">
<linearGradient
   inkscape:collect="always"
   id="linearGradient2832">
  <stop
     style="stop-color:#e9e9e9;stop-opacity:1"
     offset="0"
     id="stop2841" />
  <stop
     style="stop-color:#ffffff;stop-opacity:0"
     offset="1"
     id="stop2843" />
</linearGradient>
<linearGradient
   id="linearGradient2781"
   osb:paint="solid">
  <stop
     style="stop-color:#e5e5e5;stop-opacity:1;"
     offset="0"
     id="stop2779" />
</linearGradient>
<linearGradient
   inkscape:collect="always"
   xlink:href="#linearGradient2832"
   id="linearGradient2846"
   gradientUnits="userSpaceOnUse"
   x1="86.672661"
   y1="84.384331"
   x2="90.090706"
   y2="84.979637" />
  </defs>
  <sodipodi:namedview
 id="base"
 pagecolor="#ffffff"
 bordercolor="#666666"
 borderopacity="1.0"
 inkscape:pageopacity="0.0"
 inkscape:pageshadow="2"
 inkscape:zoom="4"
 inkscape:cx="49.995012"
 inkscape:cy="42.458459"
 inkscape:document-units="mm"
 inkscape:current-layer="layer1"
 inkscape:document-rotation="0"
 showgrid="false"
 fit-margin-top="0"
 fit-margin-left="0"
 fit-margin-right="0"
 fit-margin-bottom="0"
 inkscape:window-width="1267"
 inkscape:window-height="1040"
 inkscape:window-x="104"
 inkscape:window-y="0"
 inkscape:window-maximized="0" />
  <metadata
 id="metadata5">
<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></dc:title>
  </cc:Work>
</rdf:RDF>
  </metadata>
  <g
 inkscape:label="Layer 1"
 inkscape:groupmode="layer"
 id="layer1"
 transform="translate(-69.67318,-75.994617)">
<path
   style="fill:none;stroke:url(#linearGradient2846);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
   id="path833"
   sodipodi:type="arc"
   sodipodi:cx="81.170387"
   sodipodi:cy="87.492027"
   sodipodi:rx="10"
   sodipodi:ry="10"
   sodipodi:start="0"
   sodipodi:end="5.2186587"
   sodipodi:arc-type="arc"
   d="M 91.170387,87.492027 A 10,10 0 0 1 83.8004,97.139982 10,10 0 0 1 72.55378,92.566876 10,10 0 0 1 74.008018,80.513455 10,10 0 0 1 86.01957,78.746433"
   sodipodi:open="true"/>
  </g>

<animateTransform
    from="0 11.5 11.5"
    to="360 11.5 11.5"
    attributeName="transform"
    type="rotate"
    repeatCount="indefinite"
    dur="1300ms"
/>
</svg>

​

Answer 1

如果你想要这个形状旋转而不摇动，你必须确保它围绕着它的中心的一个点旋转。但是在您的代码中，很难确定这个形状的中心在哪里，所以难怪您很难让它工作。

对于这种情况，最好不要使用Inkscape。相反，下面是一个从头开始制作的简单示例：

​

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="23mm" height="23mm" viewBox="0 0 23 23">
  <g transform="translate(11.5,11.5)">
    <path d="M9.5,0C9.5,5.243 5.243,9.5 0,9.5C-5.243,9.5 -9.5,5.243 -9.5,0C-9.5,-5.243 -5.243,-9.5 0,-9.5C2.622,-9.5" fill="none" stroke="#000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="4">
      <animateTransform from="0" to="360" attributeName="transform" type="rotate" repeatCount="indefinite" dur="1300ms"/>
    </path>
  </g>
</svg>

​

path元素描述了以原点为中心的半径9.5单位的四分之三圆.它内部的animateTransform元素使它围绕原点旋转(因此不需要旋转参数中的附加x和y值)，外部g元素将整个事物转换为视图框的中间。