该图标不以 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" 是值得的。
当 svg 图像保存在单独的文件中并且位于文件夹或具有自然完整 URL 的网络资源中时,为您 添加
svg
图标的代码绝对正确HTML
没有图标代码,而且里面经常有拒绝的理由,很难猜出它为什么不可见。
所以只是猜测:
Chrome
中,当您运行代码localhost
时,添加 时图标将不可见<object>
,仅在网络位置图标有效。或在其中进行本地测试,Firefox
图标将可见。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>
隐藏内容的标签中。内容调用不应通过id
svg,而应通过id
<symbol id="Capa_1">
(分配
ID
<symbol="Capa_1">
,并从 SVG 中删除)将 SVG(内联方式)直接添加到不带标签的 HTML
<symbol>