时间戳

首页 > 解决方案 > 如何限制 CSS 样式仅适用于特定的 SVG？

html - 如何限制 CSS 样式仅适用于特定的 SVG？

问题描述

我有几个想要使用 CSS 设置样式的 SVG。但是，这些样式似乎适用于 SVG。

不幸的是，我不能在 SVG 元素或 iframe 上使用类。

有没有办法仅将样式应用于特定的 SVG？

这是一个示例，其中在 SVG 中使用了不同的样式，但第二种显然适用于第一种。

<svg>
  <style>
    line {
      stroke: red;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100">
</svg>

<svg>
  <style>
    line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100">
</svg>

https://codepen.io/anon/pen/LmmyEe

编辑

也许这是一个更好的例子：

<svg>
  <style>
    .colored {
      stroke: red;
    }
  </style>
  <line class="colored" x1="0" y1="0" x2="100" y2="100">
</svg>

<svg>
  <style>
    .colored {
      stroke: blue;
    }
  </style>
  <line class="colored" x1="0" y1="0" x2="100" y2="100">
</svg>

我希望能够让用户编辑每个 SVG 的样式，以便用户只需要知道一个类对所有 SVG 做了什么。如果我要使用不同的类，比如“colored1”和“colored2”左右，那会让我想避免的用户变得更棘手。

标签： htmlcsssvg

解决方案

您可以使用nth-child或类似的选择器来定位它们：

svg:nth-child(1) line {
  stroke: black;
}
<svg>
  <style>
    line {
      stroke: red;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

<svg>
  <style>
    line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

如果你不能这样做，那么只需将它包装在一个元素中并向其中添加一个类，然后你可以使用它来定位 svg

或者你可以在你的 svgs 中使用内联样式（但我猜如果你不能添加类，你就不能编辑 svg）

推荐阅读