我可以在页面中重复使用相同的SVG并应用不同的CSS吗? [英] Can I re-use the same SVG in a page and apply different CSS?
问题描述
我有一个要在网页中使用的SVG文件.我希望该图像出现多次，但要对每种图像应用不同的CSS样式.
I have an SVG file that I want to use in a web page. I want the image to appear multiple times, but to apply different CSS styles to each one.
这可能吗?
当我说应用不同的CSS样式"时，我的意思是我要样式化SVG内容(笔划，颜色，半径等)，而不仅仅是样式<img>或其他内容的样式.
When I say "apply different CSS styles", I mean that I want to style the SVG contents (stroke, color, radius, etc), not just the width of an <img> or something.
此外，我不认为复制并粘贴SVG内容"会重复使用"它.我想创建一个像logo.svg这样的文件，并从HTML中引用它.
Also, I don't consider "copy and paste the SVG contents" to be "re-using" it. I want to create a file like logo.svg and reference it from the HTML.
推荐答案
否，当前不是
当前不支持从包含HTML文档的样式设置SVG的内容(描边，填充等).
No, not currently
Styling the contents (stroke, fill, etc) of an SVG from a containing HTML document is currently not supported.
@RobertLongson非常友善，向我指出了 SVG参数规范，该规范可以提供部分解决方案.它没有在任何浏览器中实现，但可以与Javascript填充程序一起使用.但是，当我通过电子邮件向SVG工作组发送问题时，被告知:
@RobertLongson was kind enough to point me to the SVG Parameters spec, which could provide a partial solution. It is not implemented in any browser, but can be used with a Javascript shim. However, when I emailed the SVG working group with a question about it, I was told:
"SVG参数"文档当前已过期.的计划 现在是将其与CSS自定义属性和var()集成；这 规范将成为定义自定义属性的另一种方法.
The SVG Parameters doc is currently out-of-date. The plan at the moment is to integrate it with CSS Custom Properties and var(); the spec will then become an alternative way to define a custom property.
还有
SVG< img>实际上完全位于单独的文档中；它是 与< iframe>基本相同，只是更严格地锁定.我们 不允许跨文档边界直接选择 安全性，合理性和性能原因的组合.
SVG <img>s are actually in a separate document entirely; it's basically the same as an <iframe>, just locked down more strictly. We don't allow direct selection across document boundaries for a combination of security, sanity, and performance reasons.
也就是说，参数"规范定义一种方式似乎是合理的 从引用环境中获取值，因此您需要设置 < img>上的属性本身，它将转移到 包含在文档请求中的文档 .
That said, it seems reasonable for the Parameters spec to define a way to take values from the referencing environment, so you'd set the property on the <img> itself and it would transfer through to the contained document at the document's request.
一种不符合规范的黑客行为:use标记
为了记录，以下内容似乎达到了我所说的目标(从 CSS-Tricks借用的技术)，但是@RobertLongson让我知道它仅在Firefox中有效(我认为我使用的是31版)，因为Firefox不符合该规范.
A non-spec-compliant hack: the use tag
For the record, the following seemed to accomplish my stated goals (technique borrowed from CSS-Tricks), but @RobertLongson let me know that it only worked in Firefox (I think I was using version 31) because Firefox was not compliant with the spec.
<!DOCTYPE html>
<html>
<head>
<title>SVG Reuse Demo</title>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html" />
<style type="text/css">
.circle .uno { stroke: orange; stroke-width: 5px; }
.circle-1 .uno { fill: blue; }
.circle-2 .uno { fill: red; }
.circle-3 .uno { fill: green; }
</style>
</head>
<body>
<!-- Single definition of SVG -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="disc" viewbox="0 0 100 100">
<circle class="uno" cx="50" cy="50" r="40">
</symbol>
</svg>
<!-- Re-use; each is styled differently (see above) -->
<svg class="circle circle-1">
<use xlink:href="#disc">
</svg>
<svg class="circle circle-2">
<use xlink:href="#disc">
</svg>
<svg class="circle circle-3">
<use xlink:href="#disc">
</svg>
</body>
</html>
即使是标准方法，该技术也不太理想；理想的解决方案是允许使用定义在外部文件中的SVG ，例如circles.svg.
Even if it were standard, this technique would be less than ideal; the ideal solution would allow using an SVG defined in an external file, like circles.svg.
这是因为:
- 将其粘贴到HTML中很杂乱(我的实际用例可能是300行SVG)
- 如果它是一个单独的文件，我可以在其他HTML文档中重复使用
- 我可以使用SVG特定的语法突出显示对其进行编辑
- 可以将其与HTML文档分开请求和缓存
- ...基本上所有其他原因，我们通常将CSS和图像放在单独的文件中，而不是在HTML中内联. :)
这篇关于我可以在页面中重复使用相同的SVG并应用不同的CSS吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
