代码之家 › 专栏 › 技术社区 › Mose

SVG变换:根据X缩放Y

transform matrix svg

Mose · 技术社区 · 6 年前

使用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>

1 回复 | 直到 6 年前

Sphinxxx 6 年前

您可以使用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>

推荐文章

Rodrigo Crespo Miguel · 在Python中创建矩阵时遇到问题:维度错误

1 年前

Onur · R中矩阵的循环

2 年前

user9740934 · R-在定义的阈值上选择矩阵列表中存在的相同行的时间高效方法

6 年前

Karpov · 巨大的广播变量,没有parfor优化代码?

6 年前

Shika93 · Matlab元素位置

6 年前

nymuffin · 在R中创建非对称对角线为0s的1s非对称矩阵

6 年前

synchronizer · 使用openGL、glm math和正交投影,旋转时扭曲的形状

6 年前

Jakub Wagner · 厄米矩阵的特征向量[闭]

6 年前

yankeefan11 · 网格每个点处的矩阵

6 年前

Patrick · 将字母向量拆分为大小相等的向量[重复]

6 年前