SVG 变换：根据 X 缩放 Y答案

【问题标题】：SVG Transform: Scale Y depending on XSVG 变换：根据 X 缩放 Y
【发布时间】：2018-04-02 23:54:12
【问题描述】：

使用 SVG，我正在尝试复制小提琴的琴弦 - 它们是如何向螺母末端逐渐变细的。我希望我可以使用变换来做到这一点（因为我有其他复杂的形状并且想保持统一的逻辑坐标）。但我不确定转换应该是什么。

基本上，我希望最左边的 Y 坐标缩放 0.66，而在最右边，不缩放 (1.0)。

（在我下面的示例中，Y 中心线为 32.5）。

<p>This is how I want it to look:</p>
<svg width="500" height="60">
  <g stroke-width="1" stroke="black">
    <line x1="10" y1="17.5" x2="490" y2="10"/>
    <line x1="10" y1="27.5" x2="490" y2="25" />
    <line x1="10" y1="37.5" x2="490" y2="40"/>
    <line x1="10" y1="47.5" x2="490" y2="55"/>
  </g>
</svg>

<p>But I want to accomplish it by using a transform on the group element below.</p>
<svg width="500" height="60">
  <g transform="??????" stroke-width="1" stroke="black">
    <line x1="10" y1="10" x2="490" y2="10"/>
    <line x1="10" y1="25" x2="490" y2="25" />
    <line x1="10" y1="40" x2="490" y2="40"/>
    <line x1="10" y1="55" x2="490" y2="55"/>
  </g>
</svg>

【问题讨论】：

我不认为你可以用一个单一的 svg 转换来做到这一点。从您的描述中，我真的不明白为什么需要这样做。
SVG 不支持非仿射变换。您可以尝试 CSS 3d 变换，但这会使线条在一端变细。

标签： svg matrix transform

【解决方案1】：

您可以使用 CSS 3D 变换来获得“锥形”效果（使用 this example），但由于 3D transforms aren't supported on SVG elements，您必须将变换应用于整个 <svg> 元素：

.tapered {
  transform-origin: 0px 0px 0px;
  transform: matrix3d(0.52, -0.033, 0, -0.00096, 0.012, 0.52, 0, 0, 0, 0, 1, 0, -1, 17, 0, 1);
}

<svg class="tapered" xmlns="http://www.w3.org/2000/svg" width="500" height="60">
  <g stroke-width="1" stroke="black">
    <line x1="10" y1="10" x2="490" y2="10"/>
    <line x1="10" y1="25" x2="490" y2="25"/>
    <line x1="10" y1="40" x2="490" y2="40"/>
    <line x1="10" y1="55" x2="490" y2="55"/>
  </g>
</svg>

【讨论】：

Firefox 支持 SVG 元素的 3d 转换。不确定哪些浏览器仍然没有。自发布链接答案以来的 2 年内情况发生了变化。
@RobertLongson - 酷！但仍然无法在 Chrome 或 Edge 中使用。 Chrome 进行了转换，但只是看起来像 2D 比例/倾斜。测试用例：jsfiddle.net/d6uja0n7
感谢您的回答！是的，我需要将它应用于元素组，而不是完整的 SVG。太糟糕了，它还没有得到完整的浏览器支持。