SVG：未应用 CSS 属性答案

【问题标题】：SVG: CSS properties are not appliedSVG：未应用 CSS 属性
【发布时间】：2015-06-11 15:05:03
【问题描述】：

我有一个包含 SVG 元素的 HTML 5 文件。 CSS文件中也定义了一些样式（在html文件中正确导入），例如：

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}

SVG 中的一个元素如下所示：

<rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>

问题：除了内联 CSS 属性外，这个 rect 元素没有通过单元格边框获取属性。我完全不知道为什么。通常 CSS 文件有效，因为其他（非 SVG 但纯 HTML）元素的样式正确。我用 D3 生成 SVG 元素。

【问题讨论】：

我不认为 px 是一个有效的值，因为像素对 SVG 没有任何意义...
你是通过标签获取 svg 还是将文件中的整个数据转储到 html 文档中？
px 是描边宽度的有效 CSS 单位
svg 已经在 html 文件中，它的内容，例如 rect 元素，是用 D3.js 创建的

标签： css svg

【解决方案1】：

它在这个小提琴中工作：http://jsfiddle.net/j0g8rnqu/1/

这意味着您的 css 和 svg 是正确的。您对 css 文件的绑定只能有问题。如果您按照标准方式进行操作，它应该可以工作。这是最简单的情况：

file test.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="svg-test.css">
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible">
      <rect class="cell cell-border" width="256" height="256" style="fill: #79a;"></rect>
    </svg>
  </body>
</html>

file svg-test.css

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}

请注意，我在 svg 中添加了 overflow="hidden"，以确保边框不会被裁剪。

【讨论】：

【解决方案2】：

似乎对我有用。第一个矩形有类，因此是笔画，底部没有。

rect.cell-border {
    stroke: #000;
    stroke-width:1.3px;   
}

<svg height="258" width="258" viewBox="-1 -1 258 258">
  <rect class="cell cell-border" width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>

<svg height="258" width="258" viewBox="-1 -1 258 258">
  <rect width="256" height="256" style="fill-opacity: 0.5;"></rect>
</svg>

【讨论】：

这很有趣：如果我在 index.html 而不是外部文件中声明样式，它就可以正常工作。这是否指的是另一个答案，它指出我们需要一个特殊的“包含”要在 svg 中应用的 css 文件？
究竟如何包含 CSS 文件以及如何包含 SVG？内联 SVG 是否像我拥有的那样？
@pedjjj 还要检查外部 CSS 文件的 mime-type。如果这是错误的，它将不会被使用。

【解决方案3】：

好的，最终可行的解决方案是以不同的方式包含外部 css 文件：

<style>
       @import url(css/MatrixVisualization.css)
</style>

而不是常规方式。另一种可能性是使用嵌入式 css 声明。

【讨论】：

在这里我会有点迂腐，但已知@import 在某些浏览器中存在加载性能问题（顺序加载而不是并行加载），因此嵌入<style> 可能是一个性能更高的选项