Question

我有一个包含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元素。

Answer 1

似乎适合我。第一个矩形有类，因此是中风，底部没有。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Answer 3

它适用于这个小提琴：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"以确保不会裁剪边框。

SVG：未应用CSS属性

3 个答案: