Question

我正在使用“use xlink：ref”标签来渲染在“defs”标签中定义的折线并为其设置动画。我还想使用xlink：ref渲染相同的折线，但没有动画，即只是一个静态对象。但是我使用xlink：ref的所有三个实例都渲染了动画，即使没有与其中两个相关联的动画！？我怎样才能让它的三个实例中只有一个具有动画效果？我不明白为什么SVG认为我希望其他2个实例动画。谢谢你的帮助！

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg   xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="600" height="600" viewBox="0 0 600 600">

  <defs>
  <marker id="mCircle" markerWidth="160" markerHeight="160" refX="80" refY="80" markerUnits="userSpaceOnUse">
  <circle cx="80" cy="80" r="70" style="fill: red; stroke: black; stroke-width: 5px; opacity:0.2"/>
  </marker>

  <marker id="mMid" markerWidth="100" markerHeight="100" refX="50" refY="50" markerUnits="userSpaceOnUse" >
  <circle cx="50" cy="50" r="6" style="fill: black; stroke: none; stroke-width:4px; opacity:1"/>
  </marker>

  <path d="M 0,0  60,0  120,0  180,0 240,0 300,0 360,0" id="linered" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6"/>
  </defs>

  <use xlink:href="#linered" transform="translate(120, 280)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:orange;"/>
  <animate
  xlink:href="#linered"
  attributename="d"
  dur="2s"
  begin="1s;"
  values=	"M 0 0,      60 0,     120 0,     180 0,     240 0,     300 0,    360 0;
           M 180 0,    60 40,    120 -30,   180 60,    240 220,   300 60,   180 0;
           M 180 0,    60 -33,   120 60,    180 -90,   240 70,    300 0,    180 0;
           M 180 0,    60 40,    120 -30,   180 60,    240 220,   300 60,   180 0;
           M 0 0,      60 0,     120 0,     180 0,     240 0,     300 0,    360 0;"

  keySplines= "0 0.8 0.3 1;     0 0.8 0.3 1;    0 0.8 0.3 1;    0 0.8 0.3 1;"
  keyTimes=  "0;    0.33;    0.5;    0.66;     1"
  calcMode="spline"        
  repeatcount="4"
  />

  <g transform="translate(300 280)">
    <use id="static1" xlink:href="#linered" x="-180" y="0" transform="rotate(60)"  style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:blue;"/>

    <use id="static2" xlink:href="#linered" x="-180" y="0" transform="rotate(120)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:white;"/>
  </g>

</svg>

Answer 1

首先，您的代码中存在一些与属性中的大写字母有关的错误。虽然Chrome似乎更宽容（如SVG v2中所定义），但其他浏览器仍然遵循SVG v1.1，这在这方面完全符合XML标准。因此，您应始终使用区分大小写的markerUnits，attributeName和repeatCount属性。

你的主要问题是你正在制作什么：

<animate xlink:href="#linered" attributeName="d" ... />

您的动画引用<path id="linered" />元素，该元素是从中派生每个<use>的模板。他们每个人都复制整个模板，包括动画。

请注意，您的<animate>代码是兄弟，位于旁边的<use>代码中。两者都是自动关闭标签，并且这两者之间没有任何关联，它们在源代码中彼此相邻 - 但这是煽动性的。

元素及其动画之间的连接只能以两种方式建立。

<animate>元素是动画元素的子元素（不要对此语法使用xlink:href属性）：

<path ...>
  <animate ... />
</path>

<animate>元素，位于同一svg片段中的任意位置，引用动画元素：

<path id="target"... />
<!-- other content -->
<animate xlink:href="#target" ... />

如果要为一个<use>元素设置动画，而不为其他元素设置动画，则需要为该元素设置动画。例如，您可以在transform元素上设置<use>属性集的动画。但是，您要设置动画的d属性是引用的<path>元素的一部分。

<use>元素并不代表它所引用的内容，但概念上是一个隐藏其引用副本的容器（在所谓的 Shadow DOM 中）。无法使用网址或CSS选择器引用此副本。它无法单独制作动画。

唯一的解决方案是单独记下要动画的元素（注意id）：

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg   xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
width="600" height="600" viewBox="0 0 600 600">

  <defs>
  <marker id="mCircle" markerWidth="160" markerHeight="160" refX="80" refY="80" markerUnits="userSpaceOnUse">
  <circle cx="80" cy="80" r="70" style="fill: red; stroke: black; stroke-width: 5px; opacity:0.2"/>
  </marker>

  <marker id="mMid" markerWidth="100" markerHeight="100" refX="50" refY="50" markerUnits="userSpaceOnUse" >
  <circle cx="50" cy="50" r="6" style="fill: black; stroke: none; stroke-width:4px; opacity:1"/>
  </marker>

  <path id="linered" d="M 0,0  60,0  120,0  180,0 240,0 300,0 360,0" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6"/>
  </defs>

  <path id="linered-animated" transform="translate(120, 280)" d="M 0,0  60,0  120,0  180,0 240,0 300,0 360,0" style="marker-start: url(#mCircle); marker-end: url(#mCircle); marker-mid: url(#mMid); stroke-width: 12; fill:none; stroke-linejoin:round; stroke-linecap:round; stroke-opacity: 0.6;stroke-dasharray:222; stroke-dashoffset:-70px; stroke:orange;"/>
  <animate
  xlink:href="#linered-animated"
  attributeName="d"
  dur="2s"
  begin="1s;"
  values=   "M 0 0,      60 0,     120 0,     180 0,     240 0,     300 0,    360 0;
       M 180 0,    60 40,    120 -30,   180 60,    240 220,   300 60,   180 0;
       M 180 0,    60 -33,   120 60,    180 -90,   240 70,    300 0,    180 0;
       M 180 0,    60 40,    120 -30,   180 60,    240 220,   300 60,   180 0;
       M 0 0,      60 0,     120 0,     180 0,     240 0,     300 0,    360 0;"

  keySplines="0 0.8 0.3 1;     0 0.8 0.3 1;    0 0.8 0.3 1;    0 0.8 0.3 1;"
  keyTimes= "0;    0.33;    0.5;    0.66;     1"
  calcMode="spline"        
  repeatCount="4"
  />

  <g transform="translate(300 280)">
<use id="static1" xlink:href="#linered" x="-180" y="0" transform="rotate(60)"  style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:blue;"/>

<use id="static2" xlink:href="#linered" x="-180" y="0" transform="rotate(120)" style="stroke-dasharray:222; stroke-dashoffset:-70px; stroke:white;"/>
  </g>

</svg>

＆＃13;

仅作为脚注，似乎xlink:href元素中的<animate>属性在Firefox中存在错误，其中动画永远不会应用于引用<use>元素。

<use xlink：href ... =“”>动画的每个实例？

1 个答案: