如何正确使用viewBox从另一个符号创建符号？

Question

以下SVG不会像我期望的那样显示。

简要描述/意图是：

• 我创建了一个符号，它是一个由较小的矩形组成的大正方形
• 然后我创建＆＃34;切片＆＃34;使用viewBox和preserveAspectRatio
的较小符号中的这个大正方形
• 然后，我使用<use>
显示其中一些符号

问题是＆＃34;切片＆＃34;触摸右边或底边的符号不是全尺寸的，而是显示为小条。

我该如何解决这个问题？

它看起来像什么（点击查看完整图像）：

有趣的是，如果我将主<symbol>更改为<g>，我会得到一个非常不同的结果，这会遇到同样的问题

应该是什么样子（点击查看完整图片）：

---

this gist处提供的文件， 为方便起见，也在下面复制。

这说明了问题：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="box">
        <!--top left-->
        <rect x="0" y="0" height="100" width="100"
          style="fill:#0000ff" />
        <!--top middle-->
        <rect x="100" y="0" height="100" width="300"
          style="fill:#008888" />
        <!--top right-->
        <rect x="400" y="0" height="100" width="100"
          style="fill:#00ff00" />
        <!--middle left-->
        <rect x="0" y="100" height="300" width="100"
          style="fill:#888800" />
        <!--middle middle-->
        <rect x="100" y="100" height="300" width="300"
          style="fill:#2a2a2a" />
        <!--middle right-->
        <rect x="400" y="100" height="300" width="100"
          style="fill:#ff0000" />
        <!--bottom left-->
        <rect x="0" y="400" height="100" width="100"
          style="fill:#000000" />
        <!--bottom middle-->
        <rect x="100" y="400" height="100" width="300"
          style="fill:#ff0088" />
        <!--bottom right-->
        <rect x="400" y="400" height="100" width="100"
          style="fill:#8800ff" />
    </symbol>
    <symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-middle" viewBox="100 0 400 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-right" viewBox="400 0 500 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-left" viewBox="0 100 100 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-middle" viewBox="100 100 400 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-right" viewBox="400 100 500 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-left" viewBox="0 400 100 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-middle" viewBox="100 400 400 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-right" viewBox="400 400 500 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
  </defs>

  <use xlink:href="#box-top-right" x="0" y="0" height="100" width="100" />
  <use xlink:href="#box-top-middle" x="100" y="0" height="100" width="300" />
  <use xlink:href="#box-top-middle" x="400" y="0" height="100" width="100" />

  <use xlink:href="#box-middle-right" x="0" y="100" height="300" width="100" />
  <use xlink:href="#box-middle-middle" x="100" y="100" height="300" width="300" />
  <use xlink:href="#box-middle-middle" x="400" y="100" height="300" width="100" />

  <use xlink:href="#box-bottom-right" x="0" y="400" height="100" width="100" />
  <use xlink:href="#box-bottom-middle" x="100" y="400" height="100" width="300" />
  <use xlink:href="#box-bottom-middle" x="400" y="400" height="100" width="100" />
</svg>

这应该是这样的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="box">
        <!--top left-->
        <rect x="0" y="0" height="100" width="100"
          style="fill:#0000ff" />
        <!--top middle-->
        <rect x="100" y="0" height="100" width="300"
          style="fill:#008888" />
        <!--top right-->
        <rect x="400" y="0" height="100" width="100"
          style="fill:#00ff00" />
        <!--middle left-->
        <rect x="0" y="100" height="300" width="100"
          style="fill:#888800" />
        <!--middle middle-->
        <rect x="100" y="100" height="300" width="300"
          style="fill:#2a2a2a" />
        <!--middle right-->
        <rect x="400" y="100" height="300" width="100"
          style="fill:#ff0000" />
        <!--bottom left-->
        <rect x="0" y="400" height="100" width="100"
          style="fill:#000000" />
        <!--bottom middle-->
        <rect x="100" y="400" height="100" width="300"
          style="fill:#ff0088" />
        <!--bottom right-->
        <rect x="400" y="400" height="100" width="100"
          style="fill:#8800ff" />
    </symbol>
    <symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-middle" viewBox="100 0 400 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-right" viewBox="400 0 500 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-left" viewBox="0 100 100 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-middle" viewBox="100 100 400 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-right" viewBox="400 100 500 400" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-left" viewBox="0 400 100 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-middle" viewBox="100 400 400 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-right" viewBox="400 400 500 500" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
  </defs>

  <use xlink:href="#box" x="0" y="0" height="500" width="500" />
</svg>

Answer 1

找到解决方案。我的错误是没有正确使用viewBox中的<symbol>属性。

• 应为viewBox="minX minY width height"
• 而不是viewBox="minx minY maxX maxY"

工作SVG是（点击查看完整尺寸）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="box">
        <!--top left-->
        <rect x="0" y="0" height="100" width="100"
          style="fill:#0000ff" />
        <!--top middle-->
        <rect x="100" y="0" height="100" width="300"
          style="fill:#008888" />
        <!--top right-->
        <rect x="400" y="0" height="100" width="100"
          style="fill:#00ff00" />
        <!--middle left-->
        <rect x="0" y="100" height="300" width="100"
          style="fill:#888800" />
        <!--middle middle-->
        <rect x="100" y="100" height="300" width="300"
          style="fill:#2a2a2a" />
        <!--middle right-->
        <rect x="400" y="100" height="300" width="100"
          style="fill:#ff0000" />
        <!--bottom left-->
        <rect x="0" y="400" height="100" width="100"
          style="fill:#000000" />
        <!--bottom middle-->
        <rect x="100" y="400" height="100" width="300"
          style="fill:#ff0088" />
        <!--bottom right-->
        <rect x="400" y="400" height="100" width="100"
          style="fill:#8800ff" />
    </g>
    <symbol id="box-top-left" viewBox="0 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-middle" viewBox="100 0 300 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-top-right" viewBox="400 0 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-left" viewBox="0 100 100 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-middle" viewBox="100 100 300 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-middle-right" viewBox="400 100 100 300" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-left" viewBox="0 400 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-middle" viewBox="100 400 300 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
    <symbol id="box-bottom-right" viewBox="400 400 100 100" preserveAspectRatio="none">
      <use xlink:href="#box" style="overflow:none;" />
    </symbol>
  </defs>

  <use xlink:href="#box-top-left" x="0" y="0" height="100" width="100" />
  <use xlink:href="#box-top-middle" x="100" y="0" height="100" width="300" />
  <use xlink:href="#box-top-right" x="400" y="0" height="100" width="100" />

  <use xlink:href="#box-middle-left" x="0" y="100" height="300" width="100" />
  <use xlink:href="#box-middle-middle" x="100" y="100" height="300" width="300" />
  <use xlink:href="#box-middle-right" x="400" y="100" height="300" width="100" />

  <use xlink:href="#box-bottom-left" x="0" y="400" height="100" width="100" />
  <use xlink:href="#box-bottom-middle" x="100" y="400" height="100" width="300" />
  <use xlink:href="#box-bottom-right" x="400" y="400" height="100" width="100" />
</svg>