SVG 精灵不工作 - 图标显示在堆栈上
SVG sprite not working - icons display on stack
受这篇文章 How SVG Fragment Identifiers Work 的启发，我正在尝试创建 SVG 精灵，并使用 viewBox 将选定的图标作为背景放置到样式表中...
不幸的是我遇到了一个真正的问题......我无法选择合适的图标来显示，因为所有的图标都放在堆栈上并相互覆盖......
我试图使用坐标 x 和 y 来分隔图标组，但在网络浏览器中没有结果（它们仍在堆栈中），尽管当我将精灵文件放入 Sketch / AI 时，它们是分开的.
<view id="icon-facebook" viewBox="0 0 24 24" />
<view id="icon-instagram" viewBox="0 24 24 24" />
<g id="icon-instagram" fill="red">
<path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
<g id="icon-facebook" fill="pink" >
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
这里有一些错误。
显然其中之一是您的图标位置不正确。
第二个是视图 ID。 ID 在文件中必须是唯一的，但是您有两个名为 "icon-facebook" 等。这就是教程页面使用 -view 后缀作为视图 ID 的原因。例如。 icon-clock-view.
对于第一个问题，您可能通常会设计您的文件，以便将图标布置在网格中。我不确定您是如何创建文件的，以及为什么它不能那样工作。要解决此问题，您可以在矢量编辑器中编辑文件，也可以手动向受影响的图标添加 transform 以将它们移动到正确的位置。
由于您的视图定义表明 Instagram 图标位于 (0, 24)（这是 viewBox 中的前两个值），那么我们应该将该图标向下移动到该位置。
<g id="icon-instagram" fill="red">
<g transform="translate(0,24)">
<path ... />
请注意，Instagram 图标由两条路径组成。因此，我没有将 transform 添加到两个路径，而是将它们包装在一个组标记中并将转换应用到它。
这是修改后的 SVG：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 48" enable-background="new 0 0 24 48" xml:space="preserve">
<view id="icon-facebook-view" viewBox="0 0 24 24" />
<view id="icon-instagram-view" viewBox="0 24 24 24" />
<g id="icon-instagram" fill="red">
<g transform="translate(0,24)">
<path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
</g>
<g id="icon-facebook" fill="pink" >
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
</svg>
你会像这样引用图标：
<img src="sprite.svg#icon-facebook-view">
<img src="sprite.svg#icon-instagram-view">
受这篇文章 How SVG Fragment Identifiers Work 的启发，我正在尝试创建 SVG 精灵，并使用 viewBox 将选定的图标作为背景放置到样式表中...
不幸的是我遇到了一个真正的问题......我无法选择合适的图标来显示，因为所有的图标都放在堆栈上并相互覆盖......
我试图使用坐标 x 和 y 来分隔图标组，但在网络浏览器中没有结果（它们仍在堆栈中），尽管当我将精灵文件放入 Sketch / AI 时，它们是分开的.
<view id="icon-facebook" viewBox="0 0 24 24" />
<view id="icon-instagram" viewBox="0 24 24 24" />
<g id="icon-instagram" fill="red">
<path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
<g id="icon-facebook" fill="pink" >
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
这里有一些错误。
显然其中之一是您的图标位置不正确。
第二个是视图 ID。 ID 在文件中必须是唯一的，但是您有两个名为 "icon-facebook" 等。这就是教程页面使用 -view 后缀作为视图 ID 的原因。例如。 icon-clock-view.
对于第一个问题，您可能通常会设计您的文件，以便将图标布置在网格中。我不确定您是如何创建文件的，以及为什么它不能那样工作。要解决此问题，您可以在矢量编辑器中编辑文件，也可以手动向受影响的图标添加 transform 以将它们移动到正确的位置。
由于您的视图定义表明 Instagram 图标位于 (0, 24)（这是 viewBox 中的前两个值），那么我们应该将该图标向下移动到该位置。
<g id="icon-instagram" fill="red">
<g transform="translate(0,24)">
<path ... />
请注意，Instagram 图标由两条路径组成。因此，我没有将 transform 添加到两个路径，而是将它们包装在一个组标记中并将转换应用到它。
这是修改后的 SVG：
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 48" enable-background="new 0 0 24 48" xml:space="preserve">
<view id="icon-facebook-view" viewBox="0 0 24 24" />
<view id="icon-instagram-view" viewBox="0 24 24 24" />
<g id="icon-instagram" fill="red">
<g transform="translate(0,24)">
<path fill-rule="nonzero" d="M17.2808471,0 L6.58644706,0 C2.95468235,0 0,2.95482353 0,6.58658824 L0,17.2809882 C0,20.9128941 2.95468235,23.8675765 6.58644706,23.8675765 L17.2808471,23.8675765 C20.9128941,23.8675765 23.8675765,20.9127529 23.8675765,17.2809882 L23.8675765,6.58658824 C23.8677176,2.95482353 20.9128941,0 17.2808471,0 Z M21.7500706,17.2809882 C21.7500706,19.7452235 19.7452235,21.7499294 17.2809882,21.7499294 L6.58644706,21.7499294 C4.12235294,21.7500706 2.11764706,19.7452235 2.11764706,17.2809882 L2.11764706,6.58658824 C2.11764706,4.12249412 4.12235294,2.11764706 6.58644706,2.11764706 L17.2808471,2.11764706 C19.7450824,2.11764706 21.7499294,4.12249412 21.7499294,6.58658824 L21.7499294,17.2809882 L21.7500706,17.2809882 Z"/>
<path fill-rule="nonzero" d="M11.9337882 5.784C8.54258824 5.784 5.78371765 8.54287059 5.78371765 11.9340706 5.78371765 15.3251294 8.54258824 18.0838588 11.9337882 18.0838588 15.3249882 18.0838588 18.0838588 15.3251294 18.0838588 11.9340706 18.0838588 8.54287059 15.3249882 5.784 11.9337882 5.784zM11.9337882 15.9660706C9.7104 15.9660706 7.90136471 14.1573176 7.90136471 11.9339294 7.90136471 9.7104 9.71025882 7.90150588 11.9337882 7.90150588 14.1573176 7.90150588 15.9662118 9.7104 15.9662118 11.9339294 15.9662118 14.1573176 14.1571765 15.9660706 11.9337882 15.9660706zM18.3417882 3.98837647C17.9337882 3.98837647 17.5329882 4.15355294 17.2448471 4.44296471 16.9552941 4.73096471 16.7888471 5.13190588 16.7888471 5.54131765 16.7888471 5.94945882 16.9554353 6.35025882 17.2448471 6.63967059 17.5328471 6.92767059 17.9337882 7.09425882 18.3417882 7.09425882 18.7512 7.09425882 19.1507294 6.92767059 19.4401412 6.63967059 19.7295529 6.35025882 19.8947294 5.94931765 19.8947294 5.54131765 19.8947294 5.13190588 19.7295529 4.73096471 19.4401412 4.44296471 19.1521412 4.15355294 18.7512 3.98837647 18.3417882 3.98837647z"/>
</g>
</g>
<g id="icon-facebook" fill="pink" >
<path d="M2.93630055,4.93539414 L2.93630055,8.17223941 L0.564884222,8.17223941 L0.564884222,12.1302664 L2.93630055,12.1302664 L2.93630055,23.8921306 L7.80769311,23.8921306 L7.80769311,12.1305943 L11.0766237,12.1305943 C11.0766237,12.1305943 11.3827734,10.2327507 11.5311748,8.15764524 L7.82611347,8.15764524 L7.82611347,5.45138285 C7.82611347,5.04690017 8.35724295,4.50281631 8.88219587,4.50281631 L11.5363128,4.50281631 L11.5363128,0.382285714 L7.92761676,0.382285714 C2.81588497,0.382012415 2.93630055,4.34397487 2.93630055,4.93539414 Z"/>
</g>
</svg>
你会像这样引用图标：
<img src="sprite.svg#icon-facebook-view">
<img src="sprite.svg#icon-instagram-view">