Question

我正在尝试分析从coreldraw导出的SVG文件中的数据。

它实际上是一个带有常规黑色40x40矩形的文件，也是同样的40x40矩形旋转10度并用红色着色。

如果我查看SVG内容，那么我可以很好地看到我的40x40黑色矩形，其下面的线是红色旋转的。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Creator: CorelDRAW Home & Student X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100px" height="100px" version="1.0" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 100 100"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
    .str1 {stroke:red;stroke-width:0.2;stroke-linecap:round;stroke-linejoin:round}
    .fil0 {fill:none}
   ]]>
  </style>
 </defs>
 <g id="Layer_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <rect class="fil0 str0" x="15" y="19" width="40" height="40"/>
  <rect class="fil0 str1" transform="matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)" width="44.6985" height="40.9736"/>
 </g>
</svg>

但是.....

红色旋转的指定没有指定X或Y参数。我阅读了一些文档并认为这意味着它们默认为0

黑色原始矩形和红色旋转版本的大小完全相同，但红色矩形旋转10度。

如果我看一下红色矩形的宽度和高度，那么我看到宽度为44.6985，高度为40.9736，这对我来说毫无意义。

它是一个矩形，因此它的高度和宽度应完全相同。即使你旋转它。我也知道矩形将使用更多水平和垂直像素旋转10度，但即便如此，它应该是相同的数字。

这让我觉得这些价值以不统一的方式缩放，但我无法想象我应该如何根据这些信息计算正确的宽度和高度。

Answer 1

Grafical编辑器有时会对他们认为优化的算法进行非常模糊的算法。 CorelDraw在这里做的是将方块替换为不同位置的矩形并且具有不等长度44.6985×40.9736，然后应用不仅旋转和平移矩形的矩阵，而且还将其非均匀地缩放回40 ×40平方。为什么？问问Corel。

他们使用的矩阵是

matrix(0.881289 -0.155395 0.169522 0.961407 11.5017 22.5159)

并且相当于（使用此online tool计算并稍微舍一点）

translate(11.5017 22.5159) rotate(-10) scale(0.894884 0.976238)

围绕同一中心的方形（逆时针方向！）旋转将写为

rotate(-10 33.3443 40.7508) //or
translate(-6.56971 6.40931) rotate(-10)

相当于

matrix(0.984807 -0.173648 0.173648 0.984807 -6.56971 6.40931)

您可能会将此与Inkscape写入相同旋转的方式进行对比。它清晰地写出旋转，但将原点移动到其他地方：

<rect x="7.41712" y="24.1711" width="40" height="40" transform="rotate(-10)" />

SVG旋转（矩阵）矩形的宽度。看起来像宽度和高度数字缩放

1 个答案: