SVG 仅在路径坐标而不是线条和厚度上进行变换答案

【问题标题】：SVG transform only on path coordinates not lines and thicknessSVG 仅在路径坐标而不是线条和厚度上进行变换
【发布时间】：2013-08-23 20:29:17
【问题描述】：

据我了解，缩放等 svg 转换适用于整个 svg 对象，即不仅适用于矢量点，还适用于线条的粗细和宽度。 IE。 `transform="scale(10)" 操作意味着，线宽是没有这个变换的 10 倍。

有没有办法仅将这种变换应用于路径的顶点？我想保持一致的路径宽度。

假设我有以下 SVG 文件：

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" xmlns="http://www.w3.org/2000/svg" >
<polygon transform="scale(10) translate(100,100)" style=" fill: rgba(255,255,255,0);  stroke: black; " points=" 100.0,0.0 49.99999999999997,86.60254037844388 -49.99999999999998,86.60254037844388 -100.0,1.2246467991473532E-14 -49.999999999999964,-86.60254037844388 49.999999999999936,-86.6025403784439 100.0,-2.4492935982947064E-14" />
</svg>

【问题讨论】：

标签： svg

【解决方案1】：

当然，设置 vector-effect="non-scaling-stroke" 这将适用于 Opera、Chrome、Safari 和 Firefox。有一个example here。

【讨论】：

如果转换不像 scale(0,2) 那样可逆，这在 Chrome (v47) 中不起作用。我没有在其他浏览器中检查过。
嗯，UA 必须做一个反比例，所以这几乎是意料之中的。如果您有这样的比例，您将看不到任何缩放的绘图。
这是我的猜测，但这取决于实现而不是specification says。
不，它不是。椭圆可以退化为分段。并且将scale(0,2) 应用于"M0 0 H 1" 不会改变路径。应用到路径的投影没有理由“粉碎”线宽。而这一切都与scale(0.00001,2) 与scale(0,2) 与vector-effect="non-scaling-stroke" 一起使用时完全不同的事实不一致。最重要的是，这种行为与规范不一致。