html - 如何使用多个不同大小的 SVG

Question

我尝试在我的网站上集成 SVG 图标，我不明白它们是什么……我已经下载了 2 个 SVG 图标:

心

<svg width="0" height="0" viewBox="0 0 32 32" style="position:absolute;margin-left: -100%;">
    <path id ="home-icon" d="M57.062,31.398c0.932-1.025,0.842-2.596-0.201-3.508L33.884,7.785c-1.043-0.912-2.715-0.893-3.736,0.043L7.093,28.962
            c-1.021,0.936-1.071,2.505-0.111,3.503l0.578,0.602c0.959,0.998,2.509,1.117,3.46,0.265l1.723-1.543v22.59
            c0,1.386,1.123,2.508,2.508,2.508h8.987c1.385,0,2.508-1.122,2.508-2.508V38.575h11.463v15.804c-0.02,1.385,0.971,2.507,2.356,2.507
            h9.524c1.385,0,2.508-1.122,2.508-2.508V32.107c0,0,0.476,0.417,1.063,0.933c0.586,0.515,1.817,0.102,2.749-0.924L57.062,31.398z"/>
</svg>

元素

<svg width="0" height="0" viewBox="0 0 64 64" style="position:absolute;margin-left: -100%;">
    <g id="projects-icon">
        <polygon points="22,6 22,10 28,16 22,22 22,26 32,16     "/>
        <polygon points="10,10 10,6 0,16 10,26 10,22 4,16   "/>
        <polygon points="18,12 10,20 14,20 22,12    "/>
    </g>
</svg>

但是 Heart 图标是为 32x32 绘制的，而 Project 是为 64x64 绘制的，所以当我尝试在我的菜单上同时使用它们时，我必须在 viewBox 元素中指定图像大小:

<nav id="top-menu">
    <svg class="menu-icon" viewBox="0 0 32 32">
         <use xlink:href="#heart-icon">
    </svg>
    <svg class="menu-icon" viewBox="0 0 64 64">
         <use xlink:href="#project-icon">
    </svg>
</nav>

jsfiddle 上的示例:http://jsfiddle.net/Nh57e/

在这种情况下，我无法在我的 HTML 上循环，每次我想使用图像时我都必须在 HTML 上设置大小..(如果我想更改 SVG，我需要更新所有 html 源代码尺寸:/)

如何在不设置图标大小的情况下使用图像？？

谢谢大家!

Answer 1

一个解决方案是引用整个 SVG 而不是其中的一部分。

在这个版本中，我们将它们隐藏在隐藏的 <div> 中而不是将它们的大小设置为零:

<div style="display:none">
    <svg id="project-icon" viewBox="0 0 32 32">
        <g>
            <polygon points="22,6 22,10 28,16 22,22 22,26 32,16     "/>
            <polygon points="10,10 10,6 0,16 10,26 10,22 4,16   "/>
            <polygon points="18,12 10,20 14,20 22,12    "/>
        </g>
    </svg>
</div>

我已经取出了width和 height属性，以便它们默认为 100% .

然后从具有您想要的确切宽度和高度的迷你 SVG 中引用它们:

<svg class="menu-icon" width="32px" height="32px">
    <use xlink:href="#home-icon" />
</svg>

Demo here

注意。在您的演示中，您将两个 SVG 的 viewBox 大小从后向前。