我可以设置填充，但不能设置内联 SVG 元素的描边

Question

我正在尝试为简单的 SVG 图形（在本例中为旋转的椭圆）的描边和填充重新着色。我已将 SVG 内联定义为一个符号，并在我的代码中使用它，每个实例都有一个新的 class，因此它的样式可以不同。

每个形状的填充颜色都设置了正确的样式，但未显示描边样式，两个实例的默认颜色都是蓝色。

我在设置描边和填充样式时缺少什么明显的东西？

我已经在 Chrome 和 Linux 上的 Firefox 中对此进行了测试。

这是我的测试页：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<title>SVG Test</title>
<style type="text/css">

  svg.symbol {
    display: none;
  }

  .icon {
    width: 100px;
    height: 100px;
    background-color: #AAAAAA;
  }

  .type1 {
    fill: yellow;
    stroke: #FF0000;
  }

  .type2 {
    fill: green;
    stroke: #00FF00;
  }

</style>
</head>

<body>
<svg class="symbol">
  <symbol id="my_symbol">
      <g transform="translate(0 -540.36)"><ellipse class="oval" rx="284.4" ry="113.2" stroke="#04abfd" transform="matrix(.71176 -.70242 .71176 .70242 0 0)" cy="744" cx="-387.8" stroke-width="6" /></g>
  </symbol>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type1" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type2" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

</body>
</html>

Answer 1

一般来说，内联样式优先于外部样式，请将其从您的 SVG 中删除以使您的 CSS 规则生效。还建议使用内联或外部 CSS.

  svg.symbol {
    display: none;
  }

  .icon {
    width: 100px;
    height: 100px;
    background-color: #AAAAAA;
  }

  .type1 {
    fill: yellow;
    stroke: #FF0000;
  }

  .type2 {
    fill: green;
    stroke: #00FF00;
  }

<svg class="symbol">
  <symbol id="my_symbol">
      <g transform="translate(0 -540.36)"><ellipse class="oval" rx="284.4" ry="113.2" transform="matrix(.71176 -.70242 .71176 .70242 0 0)" cy="744" cx="-387.8" stroke-width="6" /></g>
  </symbol>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type1" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

<svg class="icon" viewBox="0 0 512 512">
    <use class="type2" xlink:href="#my_symbol" x="0" y="0"/>
</svg>

注意：正如 MichaelMullany 所指出的，当使用 use 和 表示属性 时，SVG 有一些特殊情况，其中样式优先级变得有点比较复杂。

这是我放在一起的示例，其中显示了其中的一部分

polygon {
  fill: green;
  stroke: yellow;
}
.poly2 {
  fill: gray;
  stroke: red;
}

<style>
  .poly1 { fill: lime; }
</style>
<svg width="300" height="300">
  <polygon class="poly1" fill="blue" stroke="black"
  style = "stroke-width: 5;"
  points = "279.1,160.8 195.2,193.3 174.4,280.8   117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
  <polygon class="poly2" fill="blue" stroke="black"
  style = "stroke-width: 5;"
  points = "117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 "/>

    <polygon class="poly3" fill="blue" stroke="black"
  style = "fill: black; stroke: blue ;stroke-width: 5;"
  points = "117.6,211.1 27.9,218.3 76.7,142.7 "/>

  
</svg>

我可以设置填充，但不能设置内联 SVG 元素的描边

I can set fill but not stroke of an inline SVG element

html

css

svg

inline

stroke