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明显不感兴趣。

前进的方法有多种，包括但不限于：

将SVG加载到矢量编辑器中并移动并调整路径大小，使其适合40x40视图框。
将SVG加载到矢量编辑器中，并使用编辑器尺寸读数确定尺寸。使用它们来设置viewBox。
从大致右侧区域的viewBox开始，并手动重新调整它，直到您将其迭代缩小到正确的大小。
将其加载到浏览器中并使用getBBox()查找viewBox的正确值。

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

内联SVG图标不显示在视图框中

1 个答案: