html - SVG 使用 : css not picking up styles

Question

在查看了使用 SVG 的所有不同方法后，我无法在使用“嵌入”时使用 CSS 影响填充颜色，而且我不明白为什么。它呈现 SVG，但我无法通过 CSS 影响它。

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

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

..然后无论我如何定位元素(无论是 svg 还是 svg 文件的路径属性)，它都不会获取任何 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 元素(和后续的路径元素)，那么以它为目标的 CSS 文件应该是有效的，例如:

a.close svg {
fill: #007393; 
}

我已经尝试了所有变体，例如，包括路径元素、嵌入元素，两者都试过了，但都不满意。

使用“对象”也好不到哪里去。

我哪里错了？

Answer 1

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

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

所以在你的情况下，

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

<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>

您还必须选择 path填充一个元素，你将覆盖 #4D4D4D填写。