html - SVG 中的换行 g 元素

Question

这可能是一个相当简单的问题，但无法找到答案。我想在 svg 元素内换行 g 元素标签。

CSS

.container { position: reletive; width: 200px; background: #ccc; }
.container g { display: inline-block; display: inline; }

HTML

<div class="container">
  <svg>
        <g transform="translate(0, 0)">
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Canada</text>
        </g>
        <g transform="translate(100, 0)">
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Germany</text>
        </g>
        <g transform="translate(200, 0)">
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Norway</text>
        </g>
        <g transform="translate(300, 0)">
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Russia</text>
        </g>
        <g transform="translate(400, 0)">
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">USA</text>
        </g>
    </svg>
</div>

这是 JSFiddle Link

Answer 1

SVG 没有像 HTML 那样的布局模型，每个元素都绘制在前面的元素之上，并且不影响其他元素的定位。

您可以使用单独的 <svg />元素，以便 HTML 布局模型可以控制元素的定位/包装:

.container { width: 200px; background: #ccc; }
.container svg { width:100px; margin:0; display: inline-block; }

<div class="container">
  <svg>
        <g>
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Canada</text>
        </g>
    </svg><svg>
        <g>
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Germany</text>
        </g>
    </svg><svg>
        <g>
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Norway</text>
        </g>
    </svg><svg>
        <g>
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">Russia</text>
        </g>
    </svg><svg>
        <g>
            <rect width="18" height="18"></rect>
            <text x="24" y="9" dy=".35em">USA</text>
        </g>
    </svg>
</div>