Question

我正在使用Javascript在自定义轮播中动态插入基于SVG的控件/计时器。作为参考，这是SVG（如果你愿意，可随意使用它，顺便说一句）......

<svg class="timer-control" width="48" height="48" viewbox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="timer-animask">
      <circle cx="50%" cy="50%" r="24" fill="#fff" />
      <circle cx="50%" cy="50%" r="20" fill="#000" />
    </mask>
  </defs>
  <g mask="url(#timer-animask)">
    <path id="timer-ring" transform="translate(24,24)"/>
  </g>
  <g id="pause">
    <rect x="18" y="16" width="4" height="16"></rect>
    <rect x="25" y="16" width="4" height="16"></rect>
  </g>
  <g id="play">
    <polygon points="0,0 0,18 18,9" transform="translate(18,15)"/>
  </g>
</svg>

我可以使用两种方法来渲染它...我可以将SVG直接插入DOM，也可以插入带有外部SVG文件链接的object。

这是问题...理想情况下，我想直接将SVG插入DOM（再次使用Javascript），但是当我有多个SVG实例时，掩码会中断，因为它引用了重复的id作为SVG绑定到DOM。

我可以想到两个解决方法，我不喜欢这两种解决方法：

选项1：对象SVG

嵌入object代替。这使SVG范围保持在对象/文件的本地，因此掩码不会[由于冲突的ID]而中断。但是，这意味着我必须在Javascript中处理动态文件路径，并且我不能再使用CSS来设置SVG的组件样式（我必须使用Javascript专门来到内部并操纵属性）。这看起来笨重，低效，不雅。它会起作用，但我不是粉丝。

选项2：带有动态ID的DOM插入

在我将SVG直接插入DOM之前生成随机id种子，并将该种子附加到所有SVG的组ID。

E.G。

<svg class="timer-control" id="timer-control-345235" width="48" height="48" viewbox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="timer-animask-345235">
      <circle cx="50%" cy="50%" r="24" fill="#fff" />
      <circle cx="50%" cy="50%" r="20" fill="#000" />
    </mask>
  </defs>
  <g mask="url(#timer-animask-345235)">
    <path id="timer-ring-345235" transform="translate(24,24)"/>
  </g>
  <g id="pause-345235">
    <rect x="18" y="16" width="4" height="16"></rect>
    <rect x="25" y="16" width="4" height="16"></rect>
  </g>
  <g id="play-345235">
    <polygon points="0,0 0,18 18,9" transform="translate(18,15)"/>
  </g>
</svg>

与选项1一样，这是功能和它让我可以使用CSS来操作SVG（这很好），但它看起来也很简洁。

问题

所以这是我的问题......有没有更好的方法我尚未考虑，或者选项1或2 真的我最好的选择？

SVG掩码的范围

0 个答案: