如何 SVG图像用 内
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何 SVG图像用 内相关的知识,希望对你有一定的参考价值。
我想将Telegram SVG icon导入一个带有<symbol>
标签和多个<use>
标签的网页。问题是当我尝试以下方法时图标被破坏:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Here is an icon:
<!-- SVG Definition -->
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="b" x1="0.6667" y1="0.1667" x2="0.4167" y2="0.75">
<stop stop-color="#37aee2" offset="0"/>
<stop stop-color="#1e96c8" offset="1"/>
</linearGradient>
<linearGradient id="w" x1="0.6597" y1="0.4369" x2="0.8512" y2="0.8024">
<stop stop-color="#eff7fc" offset="0"/>
<stop stop-color="#fff" offset="1"/>
</linearGradient>
</defs>
<symbol id="telegram-icon" viewBox="0 0 240 240">
<circle cx="120" cy="120" r="120" fill="url(#b)"/>
<path fill="#c8daea" d="m98 175c-3.8876 0-3.227-1.4679-4.5678-5.1695L82 132.2059 170 80"/>
<path fill="#a9c9dd" d="m98 175c3 0 4.3255-1.372 6-3l16-15.558-19.958-12.035"/>
<path fill="url(#w)" d="m100.04 144.41 48.36 35.729c5.5185 3.0449 9.5014 1.4684 10.876-5.1235l19.685-92.763c2.0154-8.0802-3.0801-11.745-8.3594-9.3482l-115.59 44.571c-7.8901 3.1647-7.8441 7.5666-1.4382 9.528l29.663 9.2583 68.673-43.325c3.2419-1.9659 6.2173-0.90899 3.7752 1.2584"/>
</symbol>
</svg>
<!-- SVG Usage -->
<svg><use href="#telegram-icon"></use></svg>
<br/>
<a href="https://commons.wikimedia.org/wiki/File:Telegram_logo.svg">Source of the image</a>
</body>
</html>
也在codepen.io。
为什么它会被破坏以及如何修复上面的代码以允许在网页上重用SVG图标?
Final Solution
<svg style="width: 0; height: 0; position: absolute;"...>
即使添加了零宽度和高度<svg>
仍然正在发生,添加position: absolute
解决了这个问题。
答案
似乎display:none
是导致它破裂的原因。我不是100%明白为什么。尝试使用display:none
以外的东西,例如position:fixed;left:-999em
。
以上是关于如何 SVG图像用 内的主要内容,如果未能解决你的问题,请参考以下文章