主页 / 问题 / 922146
Accepted
Nice
Asked:2020-12-18 00:02:29 +0000 UTC2020-12-18 00:02:29 +0000 UTC

svg图标不显示

  • 772

该图标不以 svg 格式显示。像这样写：

<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve">
	<symbol>
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
  </symbol>
</svg>


<div class="modalRecall__close">
  <svg>
    <use xlink:href="#Capa_1" class="capa_1"/>
  </svg>
</div>

close.svg 文件是单个图标，而不是精灵。已经尝试了一切。ON id to mine 我所做的定义已经是多余的了？通过样式出现，作为背景。

我需要通过标记显示它。在 Mozilla 中它开始显示，但在其他浏览器中没有（

我在检查器中查看 DOM - 不同浏览器中绝对没有差异，但图标仅出现在 Firefox 中。

Chrome 写道：错误：属性宽度：预期长度，“自动”。尽管 width="auto" 是值得的。

html

1 个回答

  1. Best Answer

    当 svg 图像保存在单独的文件中并且位于文件夹或具有自然完整 URL 的网络资源中时，为您 添加svg图标的代码绝对正确HTML

    <div>
  <object type="image/svg+xml" data="images/check.svg" class="icon-after"></object>
  <svg id="iconsvg1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.626 511.627" xml:space="preserve">
    <use xlink:href="img/check.svg#iconsvg1"/>
  </svg>
</div>

    没有图标代码，而且里面经常有拒绝的理由，很难猜出它为什么不可见。

    所以只是猜测：

    1. 在浏览器Chrome 中，当您运行代码localhost时，添加 时图标将不可见<object>，仅在网络位置图标有效。或在其中进行本地测试，Firefox图标将可见。
    2. 如果样式不按顺序排列，则图标将不可见。
    3. 随着缩放、定位，出现了问题。viewBox="0 0 511.626 511.627"该图标可能超出范围。

    2018 年 12 月 19 日更新

    尝试以最可靠的方式添加 svg 图标 - inline，即直接在 Html 标记中。

    • 图标代码，不包括标题，需要用标签包裹，这些标签 <symbol id="facebook">...</symbol>将隐藏图标的内容，直到它被命令调用<use>并将图标代码完全复制到 HTML

    • 现在您可以在 HTML 中的任何位置重复调用图标

      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.626 511.627" > <use xlink:href="#facebook" width="100%" height="100%"/> </svg>

    2018 年 12 月 21 日更新

    现在有了代码，原因就很清楚了

    您的图标代码包含在<symbol>隐藏内容的标签中。内容调用不应通过idsvg，而应通过id <symbol id="Capa_1">

    （分配ID <symbol="Capa_1">，并从 SVG 中删除）

    .container {
width:25%;
height:25%;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve">
	<symbol id="Capa_1">
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
  </symbol>   
  
   <use xlink:href="#Capa_1" />
  
</svg> 

</div>

    将 SVG（内联方式）直接添加到不带标签的 HTML<symbol> 

    .container {
width:25%;
height:25%;
}
    <div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 94.926 94.926" style="enable-background:new 0 0 94.926 94.926;" xml:space="preserve">
	
		<path             d="M55.931,47.463L94.306,9.09c0.826-0.827,0.826-2.167,0-2.994L88.833,0.62C88.436,0.224,87.896,0,87.335,0
				c-0.562,0-1.101,0.224-1.498,0.62L47.463,38.994L9.089,0.62c-0.795-0.795-2.202-0.794-2.995,0L0.622,6.096
				c-0.827,0.827-0.827,2.167,0,2.994l38.374,38.373L0.622,85.836c-0.827,0.827-0.827,2.167,0,2.994l5.473,5.476
				c0.397,0.396,0.936,0.62,1.498,0.62s1.1-0.224,1.497-0.62l38.374-38.374l38.374,38.374c0.397,0.396,0.937,0.62,1.498,0.62	s1.101-0.224,1.498-0.62l5.473-5.476c0.826-0.827,0.826-2.167,0-2.994L55.931,47.463z"/>
 
  
</svg> 

</div>

    • 5

相关问题