Question

在查看了使用SVG的所有不同方法后，在使用“嵌入”时，我无法使用CSS影响填充颜色，我无法弄清楚原因。它呈现SVG，但我无法通过CSS影响它。

如果我将SVG代码内联粘贴，请通过CSS填充颜色更改 - 但如果我直接引用文件，例如：

<embed src="my-svg-file.svg" type="image/svg+xml"></embed>

..然后无论我如何定位元素（svg甚至是svg文件的path属性），它都不会接受任何CSS更改。

检查它告诉我浏览器没有为svg元素选择任何样式。

这是HTML：

<a href="#" class="close">
                      <embed src="icon-close.svg" type="image/svg+xml"></embed>
</a>

在浏览器中生成以下内容：

<a class="close" href="#">
<embed src="icon-close.svg" type="image/svg+xml">
<svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path fill="#4D4D4D" d="M1.171,20c-0.292,0-0.585-0.111-0.809-0.334c-0.448-0.447-0.449-1.172-0.003-1.619l8.022-8.045L0.349,1.968 c-0.448-0.447-0.448-1.172,0-1.62c0.447-0.447,1.171-0.447,1.618,0l8.032,8.031l8.02-8.042c0.446-0.449,1.172-0.449,1.62-0.002 c0.448,0.447,0.448,1.171,0.002,1.62L11.618,10l8.033,8.033c0.447,0.447,0.447,1.172,0,1.619c-0.447,0.446-1.172,0.446-1.619,0 l-8.03-8.031l-8.02,8.043C1.758,19.888,1.464,20,1.171,20z">
</svg>
</embed>
</a>

所以你认为既然生成了svg元素（和后续的path元素），那么一个目标它的CSS文件应该是有效的，例如：

a.close svg {
fill: #007393; 
}

我已尝试过所有变体，例如包括路径元素，嵌入元素，两者等，但没有快乐。

使用＆＃39;对象＆＃39;不是更好。

我哪里错了？

Answer 1

使用<embed>导入SVG并不是最佳解决方案。它不会让您通过CSS编辑任何属性，尽管您在Web检查器中看到它。

还有其他方法可以导入SVG，但嵌入SVG内联（例如：<svg>...</svg>）是您在主机文档中使用CSS设置样式的唯一方法。否则，它需要嵌入式文档中的嵌入式样式或样式表链接。

所以在你的情况下，

＆＃13;

a.close svg path {
  fill: #007393; 
}

＆＃13;

<a class="close" href="#">
  <svg id="Layer_1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
    <path fill="#4D4D4D" d="M1.171,20c-0.292,0-0.585-0.111-0.809-0.334c-0.448-0.447-0.449-1.172-0.003-1.619l8.022-8.045L0.349,1.968 c-0.448-0.447-0.448-1.172,0-1.62c0.447-0.447,1.171-0.447,1.618,0l8.032,8.031l8.02-8.042c0.446-0.449,1.172-0.449,1.62-0.002 c0.448,0.447,0.448,1.171,0.002,1.62L11.618,10l8.033,8.033c0.447,0.447,0.447,1.172,0,1.619c-0.447,0.446-1.172,0.446-1.619,0 l-8.03-8.031l-8.02,8.043C1.758,19.888,1.464,20,1.171,20z">
  </svg>
</a>

＆＃13;

您还必须选择path来填充元素，并且您将覆盖#4D4D4D填充。

SVG使用<embed />：css没有拾取样式

1 个答案: