所以我有一个使用svg图标的导航栏。我试图替换图标,但似乎找不到正确的尺寸/形状。
这是有效的图标中的svg代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="62px"
viewBox="0 0 32 62" enable-background="new 0 0 32 62" xml:space="preserve">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
导航栏的外观如下(如果有帮助):navbar scrennshot
我不确定大小,也许这就是为什么我弄错了,但是,我尝试使用32x32p和64x64p。谢谢,欢迎回答
这是我的导航栏图标的{css片段:https://pastebin.com/7TqJU6yc。这是我的动画.js代码,如果与它有任何关系:pastebin.com/jCcvEuA4和最后一点HTML,但是实际上并没有涉及太多图标:pastebin.com/RydBqfHB。一些背景知识:图标设置为<li>
背景。这就是为什么我认为这里的大小或图标本身是问题,但是事实并非如此。
此外,这是一个带有替换图标的小屏幕截图,以帮助您理解该问题:imgur.com/a/LW7sdIZ(注意主页图标)
答案 0 :(得分:1)
为清楚起见,图标相对于SVG画布的位置调整,可以应用样式
style="border:1px solid red;"
图标周围的红色框是画布svg
为使图标可见,我添加了fill="black"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="62px"
viewBox="0 0 32 62" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
如果只想显示一个图标,则必须指定width="32" height="32" viewBox="0 0 32 32"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>