Html 向类添加SVG属性

我正在使用SVG制作图像，许多元素具有相同的属性，即一个典型的元素看起来像：

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

这些类型的直线有很多种，其中唯一改变的是坐标。必须有一种方法来创建包含笔划宽度、笔划和笔划数组属性的类？我经常重复我自己，这会有点阻塞代码

---

我尝试过使用CSS，但无法使用SVG属性。有人知道如何做到这一点吗？谢谢，

正如@ccprog在评论中提到的，有一些可以使用css设置。所有其他属性，如

x

和

y

都需要在元素本身上设置

如果你有很多重复，你可以考虑使用<代码> <代码>和<代码> <代码>，例如：

<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

。

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

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

等

请添加一些代码示例。CSS没有理由不与SVG配合使用。例如，

行{stroke:lightgray，stroke-dasharray:2.5，2.5；}

等。您尝试过用javascript实现这个吗？或者你想使用一个纯粹的css/html路径？它们既可以用作属性，也可以用作css样式。