通过CSS选择SVG模板的子元素 [英] Selecting subelements of an SVG template via CSS

问题描述

我不确定是否有正确的标记结构，选择和样式单个SVG实例，从HTML文件中的通用内联SVG模板调用。

I'm unsure of the proper markup to structure, select, and style individual SVG instances called from a common inline SVG "template" within an HTML file.

<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg> 
<!-- second instance, want different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

在我的SVG模板中，我有一个组< g& code>几个 path s，每个都有一个类名。我给了SVG组一个模板的id，并且调用它的实例。

In my SVG template, I have a group <g> of several paths, each of which is given a class name. I've given that SVG group an id of template, and am calling instances of it.

<!-- first instance to style -->
<svg id="instance1" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

<!-- second instance, want to apply different styles -->
<svg id="instance2" viewBox="0 0 799.9 177.8">
  <use xlink:href="#template">
</svg>

现在我试图在CSS中选择/样式元素这些实例，如下所示't work！）：

Now I'm attempting to select/style elements these instances in CSS as follows (though this syntax doesn't work!):

/* want to style each instance differently */   
#instance1 .outline {
    fill: red;
}

#instance2 .outline {
    fill: green;
}

我认为这很容易，但我不知道正确的方法以选择/样式这些单独的SVG，< use> 一组公共路径。

I assume this is easy, but I can't figure out the correct way to select/style these individual SVGs that <use> a common set of paths.

谢谢！

可在 http： //codepen.io/edhebert/pen/GgmKOo

推荐答案

使用> 被克隆到一个影子DOM中，因此不能使用CSS直接选择和样式化，这是我们知道的正常的直接方式。

Contents of <use> are cloned into a shadow DOM and hence cannot be directly selected and styled using CSS the normal straightforward way that we know.

此外，请注意，您可以通过将样式应用于< use> < use> c $ c>本身。例如，通过这样做：

Before going further,note that you can apply styles to the contents of a <use> element by applying the styles to the <use> itself. For example, by doing this:

< svg id =instance1viewBox =0 0 799.9 177.8>
< use xlink：href =＃templatefill =maroon>
< / svg>


.. < use> 的后代继承从< use> 元素的填充颜色。

.. the descendants of <use> will inherit the fill color from the <use> element. But all descendants will inherit this color.

如果您要将特定颜色应用于< ;使用> ，例如，可以使用另一种技术。然而，这种技术目前是有限的。

If you want to apply a specific color to only one element inside <use>, for example, another technique can be used. This technique is, however, currently limited.

该技术通过利用CSS currentColor 变量来工作。 Fabrice Weinberg在这篇博文中写了关于这个技术的文章。

The technique works by taking advantage of the CSS currentColor variable. Fabrice Weinberg wrote about this technique in this blog post over at Codepen.

基本上，如果你有一个SVG元素要使用，而不是指定 fill color在每个路径的模板中，您可以这样做：

Basically, if you have an SVG element that you want to reuse, instead of specifying a fill color inside the "template" on each path, you do this instead:

< g> ;
< path fill =currentColord =.../>
< / g>


然后，在CSS中，可以指定 color 你想要的，知道这种颜色将被应用到上述路径 - 因为这是 currentColor 如何工作。

And then, in your CSS, you can specify the color that you want, knowing that this color will be applied to the above path—because this is how currentColor works.

use＃instance1 {
fill：deepPink; / *将被`use`的内容继承* /
color：#eee; / *将被路径元素继承* /
}


用户定义的CSS变量做同样的事情。您可以在这里阅读。 CSS变量技术与Weinberg的技术相同，除了你可以定义尽可能多的变量，在你的模板中使用它们，然后在CSS中指定它们的值 - 这些值将被这些变量使用，无论你有在模板中定义它们。
这种技术可以工作，但CSS变量目前只支持在Firefox中 - 所以我不认为你会在生产中使用它。

Someone else took this technique further by using user-defined CSS variables to do the exact same thing. You can read about it here. The CSS variables technique is the same as Weinberg's technique, except that you can define as many variables as you want, use them inside your template, and then specify their values in your CSS—these values will then be used by these variables wherever you have defined them inside the template. This technique works, but CSS variables are currently only supported in Firefox—so I don't suppose you would use it in production.

希望这有助于。

这篇关于通过CSS选择SVG模板的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！