在 HTML 中嵌入一个 SVG 精灵的图像

Question

我有一个自动生成的 SVG spritemap (grunt-svg-sprite)，看起来像这样 file:

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

此 SVG 包含三个“图像”，其 ID 为“block1”、“block2”和“block3”。

我想在我的网页上只显示“block1”，以便该图像的尺寸可以缩放。我想将宽度设置为10rem，高度应该自动调整。我是这样做的：

<img src="https://cdn.mediacru.sh/ahw4Jhv0r6GG.svg#block1" style="width:10rem;"/>

在这里我创建了一个JSFiddle。问题是，网络浏览器显示所有三个块，而不仅仅是“block1”。我怎样才能用<img> 做到这一点？我必须支持最新版本的网络浏览器并且只支持 IE11，以前的版本会很棒，但不是必须的。

（我不能使用object HTML 标签，因为我的 IE11 支持有限 - 我看不到这个 page 上的对象，我看到“iframe”、“img”和“ CSS背景”但“对象”：三次：“删除活动内容”）。

Answer 1

解决问题的最简单方法是直接将一些 CSS 添加到 SVG 文件中：

<style><![CDATA[ svg svg { display: none; } svg svg:target { display: inline; }]]></style>

这个简单的 CSS 可防止显示所有块，并仅显示您要定位到的块。

Here 是添加了 CSS 和 JSFiddle demo 的 SVG 文件。

当你使用 Grunt 时，你可以使用例如自动化它。 grunt-string-replace 任务（使用 grunt-svg-sprite 处理后在 SVG 文件上运行它）。任务应该或多或少像这样：

'string-replace': {
dist: {
    files: {
        './src/preprocessedSVG.svg': './build/sprite.svg'
    },
    options: {
        replacements: [{
            pattern: '<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">',
            replacement: '<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>'
        }]
    }
}

您可以在模式中添加一些变量或正则表达式，使其更加健壮和防弹。

--

另一种解决方案是切换到由 Chris Coyer (http://css-tricks.com/svg-sprites-use-better-icon-fonts/) 描述的内联 SVG。还有一个 Grunt 任务 - [grunt-svgstore] (https://github.com/FWeinb/grunt-svgstore)。

附：您需要复制这些链接并删除“https://”之后的空格，因为我是 StackOverflow 的新手，不能发布超过 2 个链接...