如何限制CSS样式仅适用于特定的SVG？ [英] How to restrict CSS style to apply to a particular SVG only?

问题描述

我有几个我想用CSS设计的SVG。但是，这些样式似乎适用于各种SVG。

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

有没有一种方法可以将样式应用于特定的SVG？

下面是一个示例，其中不同样式在SVG中使用，但第二个适用于第一个。

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

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

$ b 编辑

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

 < svg> 
< style> 
。colored {
 stroke：red; 
} 
< / style> 
< line class =coloredx1 =0y1 =0x2 =100y2 =100> 
< / svg> 
 
< svg> 
< style> 
。colored {
 stroke：blue; 
} 
< / style> 
< line class =coloredx1 =0y1 =0x2 =100y2 =100> 
< / svg> 
  

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

解决方案

如果你知道你的SVG如何放置在你的HTML中，并且没有办法来添加ID或类，你可以依靠 nth-of-键入 / nth-child 将您的规则限制为只有一个元素： div class =snippetdata-lang =jsdata-hide =truedata-console =truedata-babel =false>

 < svg> <风格> svg：nth-​​of-type（1）line {stroke：red; }< / style>< line x1 =0y1 =0x2 =100y2 =100/>< / svg>< svg> <风格> svg：nth-​​of-type（2）line {stroke：blue; }< / style> < line x1 =0y1 =0x2 =100y2 =100/>< / svg>  

以上内容与使用外部CSS相同：

  svg：nth-​​of-type（1）line {stroke：red;} svg：nth-​​of-type（2）line {stroke： blue;}  

 < svg>< line x1 = 0y1 =0x2 =100y2 =100/>< / svg>< svg> < line x1 =0y1 =0x2 =100y2 =100/>< / svg>  

---

另一个想法是使用您在SVG（或包装器）上定义的CSS变量作为内联样式：
$ b

  line {stroke：var（ -  s，＃000） ;}}  

< svg style = - s ：红色> < line x1 =0y1 =0x2 =100y2 =100/>< / svg>< span style = - s：green>< svg> < line x1 =0y1 =0x2 =100y2 =100/>< / svg>< / span>

I have several SVGs that I would like to style using CSS. However, the styles seem to be applied across SVGs.

Unfortunately, I cannot use classes on SVG elements or a iframe.

Is there a way to apply styles to a particular SVG only?

Here is an example where differenty styles are used within SVG but the second applies to the first aparently.

<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

Edit

Maybe this is a better example:

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

I would like to be able to let the user edit the style of each of these SVGs so that the user needs to know only what a class does for all the SVGs. If I would use different classes, like "colored1" and "colored2" or so, that would make it trickier for the user which I want to avoid.

解决方案

If you know how your SVG are placed within your HTML and there is no way to add ID or classes, you can rely on nth-of-type/nth-child to restrict your rules to only one element:

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

<svg>
  <style>
    svg:nth-of-type(2) line {
      stroke: blue;
    }
  </style>
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

And the above is the same as using external CSS:

svg:nth-of-type(1) line {
  stroke: red;
}

svg:nth-of-type(2) line {
  stroke: blue;
}

<svg>

<line x1="0" y1="0" x2="100" y2="100"/>
</svg>

<svg>

  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>

---

Another idea is to use CSS variable that you define on your SVG (or on a wrapper) as inline style:

line {
  stroke: var(--s,#000);
}

}

<svg style="--s:red">
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>
<span style="--s:green">
<svg >
  <line x1="0" y1="0" x2="100" y2="100"/>
</svg>
</span>

这篇关于如何限制CSS样式仅适用于特定的SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！