html - 内联 SVG 图标未显示在 View 框中

Question

事实证明这对我来说太难了，所以另一双眼睛会有很大帮助!

我的 HTML 文件中有一些内联 SVG，但我不知道为什么它们不显示。我尝试通过操纵它们的每个 viewBox 属性来找到它们，但我还没有成功。

为什么我看不到它们有什么想法吗？

body {
  background-color: #ddd;
}
.st1 {
  fill: #FFFFFF;
}
.st15 {
  fill: #000000;
}
p {
  width: 600px;
}
span svg {
  width: 35px;
  height: 40px;
  border: 1px solid red;
  float: left;
  padding: 0;
  margin: 0;
}

<!-- SVG Sprite, which is hidden, we reference the individual symbols/icons later -->
<svg style=" display: none; position: absolute;" <!-- width: 20px; height: 20px; " --> <!-- width="0 " height="0 " --> version="1.1 " xmlns="http://www.w3.org/2000/svg " xmlns:xlink="http://www.w3.org/1999/xlink ">
        <defs>
            <symbol id="icon-plus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img ">
                <title>plus sign</title>
                <!-- <path class="path1 " d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z "></path> -->
				<path class="st1 " d="M342.5,21.5v2c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3h-4.4V29c0,0.3-0.1,0.5-0.3,0.7 c-0.2,0.2-0.4,0.3-0.7,0.3h-2c-0.3,0-0.5-0.1-0.7-0.3c-0.2-0.2-0.3-0.4-0.3-0.7v-4.4h-4.4c-0.3,0-0.5-0.1-0.7-0.3s-0.3-0.4-0.3-0.7 v-2c0-0.3,0.1-0.5,0.3-0.7s0.4-0.3,0.7-0.3h4.4V16c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.3,0.7-0.3h2c0.3,0,0.5,0.1,0.7,0.3
c0.2,0.2,0.3,0.4,0.3,0.7v4.4h4.4c0.3,0,0.5,0.1,0.7,0.3C342.4,21,342.5,21.2,342.5,21.5 "/>
			</symbol>
			
			<symbol id="icon-minus " viewBox="0 0 40 40 " preserveAspectRatio="xMinYMin " aria-labelledby="title desc " role="img ">
                <title>minus</title>
                <!-- <path class="path1 " d="M11 1l-5 5h-3l-3 4c0 0 3.178-0.885 5.032-0.47l-5.032 6.47 6.592-5.127c0.919 2.104-0.592 5.127-0.592 5.127l4-3v-3l5-5 1-5-5 1z "></path> -->
				<path class="st15 " d="M318.6,21.3v2.4c0,0.3-0.1,0.6-0.4,0.9c-0.2,0.2-0.5,0.4-0.9,0.4h-15.5c-0.3,0-0.6-0.1-0.9-0.4 c-0.2-0.2-0.4-0.5-0.4-0.9v-2.4c0-0.3,0.1-0.6,0.4-0.9c0.2-0.2,0.5-0.4,0.9-0.4h15.5c0.3,0,0.6,0.1,0.9,0.4 C318.5,20.7,318.6,21,318.6,21.3 "/>
			</symbol>
	
        </defs>
    </svg>

    <!-- Here we display the individual icons with referencing their symbol id -->
	<p>
		<span>
			<svg>
				<use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-plus "></use>
			</svg>
		</span>
		
		<span>
			<svg>
				<use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-minus "></use>
			</svg>
		</span>

		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis arcu eu ante vestibulum, non dictum felis pellentesque. 
		Curabitur non risus rhoncus tellus vehicula pellentesque. Pellentesque commodo enim scelerisque quam accumsan, id fermentum augue condimentum. 
		Praesent sed imperdiet quam. Cras dapibus orci maximus, aliquam turpis sed, laoreet sapien. Curabitur feugiat pulvinar orci, sit amet venenatis nibh consequat vel.
		Vivamus vehicula eget ex non semper. Donec sit amet luctus neque. 
		Vestibulum aliquam elit justo, in pretium neque efficitur ac. Proin tellus diam, finibus sit amet tristique in, commodo ac metus. 
		Mauris eget erat ut erat rutrum ultricies sed non leo. Duis in turpis magna. 
		Praesent efficitur, odio congue venenatis tempor, sem augue sollicitudin orci, eu convallis enim diam et eros. 
		Vivamus nulla odio, eleifend vitae pharetra non, lobortis at nulla. 
	</p>
    <!-- <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink " xlink:href="#icon-fire "></use>
    </svg> -->

Answer 1

viewBox属性告诉浏览器您的 SVG 内容在坐标系中的位置。

您目前将其设置为“0 0 40 40”，表示从 (0,0) 到 (40,40)。但是看看你的第一个坐标 <path> : (342.5, 21.5)。所以你显然与你的 viewBox 相去甚远。

有几种前进的方式，包括但不限于:

1. 将您的 SVG 加载到矢量编辑器中，然后移动路径并调整其大小，使其适合 40x40 viewBox。

2. 将 SVG 加载到矢量编辑器中，并使用编辑器的尺寸读数确定尺寸。使用它们来设置 viewBox。

3. 从大致位于正确区域的 viewBox 开始，手动不断重新调整它，直到您迭代地将其缩小到正确的大小。

4. 将其加载到浏览器中并使用 getBBox()为 viewBox 找到正确的值。

另请注意，如果您选择不使用位于或靠近原点 (0,0) 的符号，您可能还需要将 viewBox 属性添加到具有 <use> 的 SVG。元素。