Question

我试图重新着色笔画并填充一个简单的SVG图形，在这种情况下是一个旋转的椭圆。我已将SVG内联定义为符号，并在我的代码中使用它，并为每个实例添加一个新类，因此它的样式可以不同。

每个形状的填充颜色都经过正确设计，但笔触样式不会显示，在两个实例上都是默认的蓝色。

我错过了什么明显的东西来描绘笔画和填充？

我已经在Linux上的Chrome和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所指出的，SVG在使用use和表示属性时会遇到一些特殊情况，其中样式优先级变得稍微复杂一些。

以下是我放在一起的示例，其中显示了一些

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元素的笔划

1 个答案: