不能工作tad <use>与数据：image/svg + xml，<svg

我想在我的.htm页面中插入.svg。但'使用'在'svg'中不起作用。如何做到这一点？不能工作tad <use>与数据：image/svg + xml，<svg

background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' 
xmlns:xlink='http://www.w3.org/1999/xlink' width='180' height='118' 
fill='white'><path d='M90,14 143,108H37z' stroke-width='11' 
stroke='red'/><g id='cr'><path d='M70,68 73,59H90L93,68' stroke-width='2' 
stroke='black'/><path d='M67,70H93V74H67M71,74V81M92,74V81' stroke- 
width='5' stroke='black'/></g><use x='13' y='8' xlink:href='#cr'/><use 
x='26' y='16' xlink:href='#cr'/></svg>")

来源

2017-04-21 Alexander V. Ulyanov

＃字符在url中保留用于片段标识符的开始，它们必须编码为％23 –

好的。谢谢。如何使用fill ='＃fff'颜色代替fill ='white'？ –

％23fff，因为我已经表明 –

这里“使用”标签没有错。

由于某些原因，URL无法读取该SVG。

有一种替代方式，它是可读和可维护的。

从URL拿出你的SVG和创建一个单独的SVG文件...为前：test.svg

<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='180' height='118' fill='white'> 

<path d='M90,14 143,108H37z' stroke-width='11' stroke='red'/> 

<g id='cr'> 
<path d='M70,68 73,59H90L93,68' stroke-width='2' stroke='black'/> 
<path d='M67,70H93V74H67M71,74V81M92,74V81' stroke-width='5' stroke='black'/> 
</g> 

<use x='13' y='8' xlink:href='#cr'/> 
<use x='26' y='16' xlink:href='#cr'/> 

</svg>

而在你的CSS。说它简单，如图URL SVG文件名称下面的测试代码：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
    background: url("test1.svg") no-repeat fixed center; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

做的这种方式可以帮助你在

维修方便
可重复使用的
可读性

来源

2017-04-21 17:40:35 Naidu

谢谢。不。它的方法为页面添加+1请求。 –

回答

相关问题