围绕矩形中心的 SVG 旋转答案

【问题标题】：SVG rotation around rectangle center围绕矩形中心的 SVG 旋转
【发布时间】：2015-03-29 22:34:12
【问题描述】：

我有 SVG 卡片文件：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2.26in" height="14.01in" baseProfile="full">
  <defs>
    <rect id="card" width="2.25in" height="3.5in" rx="0.125in" ry="0.125in" style="fill:#fff;stroke:#000;stroke-width:2" />
  </defs>
  <svg id="AC">
    <use xlink:href="#card" />
    <text x="10" y="15" font-size="30" style="dominant-baseline:hanging">
      A
    </text>
    <text x="10" y="40" font-size="30" style="dominant-baseline:hanging">
      &#9827;
    </text>
    <text x="1.125in" y="1.75in" font-size="120" style="text-anchor:middle;dominant-baseline:central;">
      &#9827;
    </text>
  </svg>
</svg>

我想画卡片的底部。我该怎么做？我认为需要围绕卡片中心旋转顶部文本，但它不起作用。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2.26in" height="14.01in" baseProfile="full">
  <defs>
    <rect id="card" width="2.25in" height="3.5in" rx="0.125in" ry="0.125in" style="fill:#fff;stroke:#000;stroke-width:2" />
  </defs>
  <svg id="AC">
    <use xlink:href="#card" />
    <g transform="rotate(180, 1.125in, 1.75in)">
    <text x="10" y="15" font-size="30" style="dominant-baseline:hanging">
      A
    </text>
    <text x="10" y="40" font-size="30" style="dominant-baseline:hanging">
      &#9827;
    </text>
    </g>
    <text x="1.125in" y="1.75in" font-size="120" style="text-anchor:middle;dominant-baseline:central;">
      &#9827;
    </text>
  </svg>
</svg>

【问题讨论】：

标签： svg

【解决方案1】：

您不能在转换中使用带有单位的数字。所以你的rotate(180, 1.125in, 1.75in) 将不起作用。

您需要使用像素值。相当于您的转换是rotate(180, 108, 168)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2.26in" height="14.01in" baseProfile="full">
  <defs>
    <rect id="card" width="216" height="336" rx="0.125in" ry="0.125in" style="fill:#fff;stroke:#000;stroke-width:2" />
  </defs>
  <svg id="AC">
    <use xlink:href="#card" />
    <g id="AC-corner">
      <text x="10" y="15" font-size="30" style="dominant-baseline:hanging">A</text>
      <text x="10" y="40" font-size="30" style="dominant-baseline:hanging">&#9827;</text>
    </g>
    <use xlink:href="#AC-corner" transform="rotate(180,108,168)"/>
    <text x="1.125in" y="1.75in" font-size="120" style="text-anchor:middle;dominant-baseline:central;">
      &#9827;
    </text>
  </svg>
</svg>

【讨论】：