Inkscape导出SVG中rect标签x/y属性含义及负y坐标问题咨询

示例SVG代码 #

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="256"
   height="256"
   viewBox="0 0 25.6 25.6"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <rect
     style="fill:#800080;stroke-width:0.0566834"
     id="rect122"
     width="10.274419"
     height="9.6836576"
     x="10.734594"
     y="-6.7066712"
     transform="matrix(0.84492681,0.53488194,-0.51677089,0.85612373,0,0)" />
</svg>

问题一：rect标签x、y属性的具体含义 #

• 按照SVG规范定义，<rect>的x和y属性描述的是未应用该元素自身transform变换前，矩形左上角顶点在其所属当前用户坐标系的位置：
  • x为水平坐标，SVG默认坐标系下向右为正方向
  • y为垂直坐标，SVG默认坐标系下向下为正方向
    示例中的x、y是矩形未旋转时的原始左上角坐标，后续transform的矩阵变换会作用在整个矩形的所有坐标点上，计算出最终渲染到画布的实际位置。

问题二：此处y坐标为负值的原因 #

负y值是Inkscape导出逻辑和编辑操作共同作用的结果：

1. 你在Inkscape中对该矩形执行了旋转变换操作，Inkscape导出SVG时不会把变换计算后直接覆盖x、y、宽高等基础属性，而是保留元素的原始局部坐标，将变换逻辑单独写入transform属性，方便后续重新编辑
2. 矩形旋转后，它的原始局部坐标系的左上角刚好落在了SVG根节点viewBox="0 0 25.6 25.6"定义的可视区域上方，SVG默认坐标系y轴向下为正，可视区域以上的坐标自然为负值，就出现了负y的情况
   该负值不会影响最终渲染效果，transform矩阵会完成坐标转换，最终矩形会正常显示在可视区域内。

内容的提问来源于stack exchange，提问作者Megarev