Question

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

基本上，我希望最左边的Y坐标缩放.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>

Answer 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>

SVG变换：根据X

1 个答案: