与 SVG 中的 rect 数据相关的问题

Question

我目前正在为我正在从事的项目编写 SVG 的解析器。 我正在使用 inkscape 作为编辑器

我从inkscape得到的普通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 到底是什么意思？ 我也很困惑为什么y坐标是负的？

Answer 1

Animation 显示矩形的原始位置和变换位置。

 svg { border: solid 1px grey; background: linen; margin: 100px 0 0 0; overflow: visible; } rect { animation: move 3s linear infinite; } @keyframes move { 0% { transform: matrix(1, 0, 0, 1, 0, 0); } 50% { transform: matrix(0.84492681,0.53488194,-0.51677089,0.85612373,0,0); } 100% { transform: matrix(1, 0, 0, 1, 0, 0); } }

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