Question

这可能是一个相当简单的问题但无法找到答案。我想在g元素中排除svg元素标记。

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布局模型可以控制元素的定位/包装：

＆＃13;

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

＆＃13;

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

＆＃13;

换行SVG中的g元素

1 个答案: