如何在路径转换后设置路径的描边宽度？

Question

我有一个以下形式的 SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

当我希望图像显示 0.5px 边框时，图像显示为巨大的黑色边框。如何在变换后应用笔画宽度？如果这是不可能的，那么包装元素以使其正确显示的最简单方法是什么？我想避免修改“d”属性。

Answer 1

您可以使用矢量效果=“非缩放中风”

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path vector-effect="non-scaling-stroke" d="M0.0 0.0 L1.0 0.0 L1.0 1.0 L0.0 1.0 L0.0 0.0 Z" fill="none" transform="translate(276.53762663809374, 97.7838427947598) scale(177.52243125896803, -89.004366812227)" style="stroke: black; stroke-width: 0.5px;"></path>
</svg>

需要注意的是，IE9/10 没有实现这一点，但 Webkit、Opera 和 Firefox 却实现了。