Question

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

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

SVG围绕矩形中心旋转

1 个答案: