Question

我有svg代码，我需要在svg g标签转换中添加矩阵属性。我已经从给定的svg值添加了矩阵代码属性。 Actualy我正在使用生成的svg值中的php重新创建svg元素。或者有没有办法计算svg变换矩阵属性。

我如何计算矩阵是（itemzoom_first_value + 1）和（itemzoom_second_value + 1）。

<svg>
      <g id="0.601788739906624" transform="matrix(1.6636363636364 0 0 1.7414965986395 -6 372.3537414966)">
    <text fill="#000000" stroke="none" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" x="0" y="0" text-anchor="left" font-size="90.75" font-family="Twine" data-textcurve="0" data-itemzoom="1 1" itemzoom="0.6636363636363637 0.7414965986394558">Hello
    </text>
    </g>
<svg>

Answer 1

SVG没有itemzoom属性
唯一标识符的名称不得以数字开头。分配以字母开头的名称，例如，id =“txt1”
原点svg是左上角。要查看您需要的文本 “y”坐标为文本指定一个正值，大于字体大小。
要增加文本大小，可以使用scale (2)命令将大小增加两倍或任何其他值，例如：

scale (1.2 1.5)将“X”轴增加1.2倍，按轴“Y”增加1.5

以下是带有更正的svg代码

<svg >
      <g id="txt1" >
    <text y="60" fill="#000000" stroke="none"  stroke-linecap="round" stroke-linejoin="round" text-anchor="left" font-size="90.75" font-family="Twine"  >Hello  </text>
    </g>
<svg>

悬停在

上时动画文字大小调整的示例

<svg >
      <g id="txt1" >
    <text y="30" fill="#000000" stroke="none"  stroke-linecap="round" stroke-linejoin="round" text-anchor="left" font-size="32" font-family="Twine"  >Hello  </text>
    </g>  
	<animateTransform xlink:href="#txt1"  attributeName="transform" type="scale" dur="4s"  begin="txt1.mouseover" end="txt1.mouseout"  values="1;4;1" fill="freeze" restart="whenNotActive"/>
<svg>

如何将变换矩阵属性添加到svg文本？

1 个答案: