Question

我以这种方式用三个块创建了SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="69" viewBox="0 0 116 69">
    <style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>
    <svg width="116" height="25" viewBox="0 0 116 25" id="block1" y="0">
        <path fill="#fff" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
        <path fill="#D5FF54" stroke="#FF51D4" stroke-miterlimit="10" d="M0 0h116v25H0z"/>
    </svg>
    <svg width="20" height="20" viewBox="0 0 20 20" id="block2" y="25">
        <path fill="#FF001A" d="M.5.5h19v19H.5z"/>
        <path fill="#1D1D1B" d="M19 1v18H1V1h18m1-1H0v20h20V0z"/>
    </svg>
    <svg width="27" height="24" viewBox="0 0 27 24" id="block3" y="45">
        <path d="M.5.5h26v23H.5z"/>
        <path fill="#6BFF4E" d="M26 1v22H1V1h25m1-1H0v24h27V0z"/>
    </svg>
</svg>

我想只显示＆＃34; block2＆＃34;在我的网页中，我这样做：

<object type="image/svg+xml" style="border:1px solid blue;" data="https://cdn.mediacru.sh/KG1yCCqs7p3k.svg#block2"></object>

这是一个JSFiddle，你会看到我只能显示＆＃34; block2＆＃34;但你也会看到有一个蓝色边框，告诉我尺寸与完整的SVG图像一样大。我在SVG中有不同大小的SVG图像，我需要显示图像（＆＃34; block1＆＃34;，＆＃34; block2＆＃34;＆＃34; block3＆＃34;）没有这个不需要的填充/白色空间。

我该怎么做？

Answer 1

您可以这样做：

HTML：

<div>
    <object type="image/svg+xml" data="https://cdn.mediacru.sh/KG1yCCqs7p3k.svg#block2"></object>
</div>

CSS：

object {
    margin-top: -26px;
}
div {
    overflow: hidden;
    width: 19px;
    height: 19px;
    border:1px solid blue;
}

SVG精灵：对象嵌入SVG图像有不必要的填充

1 个答案: