带有 file.css 的动态 SVG

Answer 1

看你的截图我不太确定你想要获得的形状。但起初我会删除你的变换scale style（因为我没有看到重点）和你想在CSS端重新定义的属性（stroke＆fill）。 我还更改了颜色以区分笔划和填充，然后我将“1px”放入笔划宽度样式而不是您的 css var，因为它未在您的示例中定义。

所以它会是这样的：

<svg>
  <g transform="translate(100 140)" class="Box-ST00">
    <rect width="150" height="10"/>
  </g>
  <g transform="translate(90 150) rotate(0)" class="Box-ST00">
    <rect width="150" height="10" transform="rotate(-90)" />
  </g>
</svg

<style>
  .Box-ST00 { stroke: black; fill: #ccc; stroke-width: 1px }
  .Box-ST01 { stroke: black; fill: #ccc ; stroke-width: 1px }
</style>