Question

我正在努力找出如何通过将* .svg文件放在我的HTML网站中的不同位置来重用* .svg文件的正确方法，但是在不使用JavaScript的情况下应用不同的样式表。

来自index.html的

小部件：

<OBJECT type="image/svg+xml" data="myLogo.svg" class="svglogo">
<img src="svglogo_fallback.png">
</OBJECT>

myLogo.svg：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" class="mySvg" id="test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" enable-background="new 0 0 841.89 595.28" xml:space="preserve">

<defs>
    <style type="text/css"><![CDATA[
       .mySvg .teste {
         fill: red;
       }
    ]]></style>
  </defs>

<path class="teste" fill="#000000" d="abcdefg"/>
</svg>

* .svg中的一种可能性是使用CSS将填充更改为红色，这非常有效，但也意味着每个嵌入的myLogo.svg都会变为红色。

有没有什么方法可以在不使用JavaScript的情况下为嵌入对象分配合适的CSS样式？

Answer 1

我不是100％确定你想要什么，但我很确定答案是你不能按照你想要的方式做事。我认为这个问题很重要：How to apply a style to an embedded SVG?

可重用性将svg嵌入到html中

1 个答案: