Question

我有以下html和svg文件：

home.html

<html>
<head>
  <style>
   span {
    filter: invert(100%)
   }
  </style
</head>
<body>
  <span><img src="my.svg" /></span>
  <div><img src="my.svg" /></div>
</body>
</html>

my.svg

<svg version="1.1"
 baseProfile="full"
 width="36" height="36"
 xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

</svg>

正在渲染两个矩形：如预期的那样，一个浅蓝色和第二个红色。如何仅通过更新.svg代码来保留两个图像的红色？不幸的是，我无法更改承载我的图片的html页面的代码。

Answer 1

不能。不修改HTML就无法实现您想要的。

一旦加载并渲染了SVG，它就无法控制页面可能对其应用哪些CSS效果。

Answer 2

我不知道如何以及为什么，但是如果你给红色，就会得到青色，如果给青色，就会得到红色

<svg version="1.1"
baseProfile="full"
width="36" height="36"
xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="#00FFFF" />

</svg>

Answer 3

我认为问题在于home.html中提供的样式标签将其更改为...

<html>
<head>

</head>
<body>
  <span><img src="my.svg" /></span>
  <div><img src="my.svg" /></div>
</body>
</html>

覆盖外部SVG图像中的CSS属性

3 个答案: