Question

我使用SVG制作图像，许多元素具有相同的属性，即典型元素如下：

<line x1="30" y1="10" x2="270" y2="10" stroke-width="0.1" stroke="lightgray" stroke-dasharray="2.5 2.5"/>

这些类型的线有很多种，其中唯一改变的是坐标。必须有办法制作某种包含stroke-width，stroke和stroke-dasharray属性的类？我正在重复自己，并且有点堵塞了代码。

我已尝试使用CSS，但我无法使用SVG属性。有谁知道如何实现这一目标？感谢

Answer 1

样式属性可以从其父元素继承。因此，如果你有一堆具有相同属性的行，那么只需将它们包装在一个组中并将属性应用于该组。

<g stroke-width="0.1" stroke="lightgray" stroke-dasharray="2.5 2.5"/>
  <line x1="30" y1="10" x2="270" y2="10"/>
  <line x1="40" y1="10" x2="270" y2="30"/>
  ...etc...
</g>

Answer 2

正如@ccprog的评论中提到的，可以使用css设置一些styling attributes。需要在元素本身上设置所有其他属性，如x和y。

如果你有很多重复，你可以考虑使用<defs>和<use>，如下所示：

<svg>
  <defs>
    <line id="line-1" x="..." ... />
  </defs>

  <use xlink:href="#line-1" transform="translate(...)" />
  <use xlink:href="#line-1" transform="rotate(...)" />
  <use xlink:href="#line-1" transform="translate(...) rotate(...)" />
  .
  .
  .
</svg>

通过这种方式，您可以按原样重复使用该行，但在重新排列它们时，您只能进行转换。

请注意，在SVG 2.0中，xlink:href的使用仅针对href元素中的<use>进行了描述。

将SVG属性添加到类中

2 个答案: