如何使用CSS背景的网址到SVG里面的HTML文件

我想链接background: url(#myid);，id就是一个SVG元素。如何使用CSS背景的网址到SVG里面的HTML文件

<svg id="myid"></svg>

这可能吗？难道我做错了什么？

.spesial { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url(#test); 
 
}

<svg id="test" xmlns="http://www.w3.org/2000/svg" width=100 height=100 viewbox="0 0 1500 1500"> 
 
    <metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata> 
 
    <path transform="translate(0 500)" stroke="#a4e" d="m929 11v428q-18-20-39-37-149-114-238-188-28-24-46-38t-48-27-57-13h-2q-26 0-57 13t-48 27-46 38q-88 74-238 188-21 17-39 37v-428q0-8 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 82-159 108-85 224-177 4-2 20-16t25-21 25-18 28-15 24-5h2q11 0 24 5t28 15 25 18 25 21 20 16q116 92 224 177 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" 
 
    /> 
 
</svg> 
 
<div class="spesial"> 
 
    Should there not be a background image here? 
 
</div>

我知道，我可以将所有数据中的链接，但后来我将无法再使用它。 URL
和<image href="pic.svg"然后我的CSS样式将不得不内联。

来源

2015-04-23 Persijn

[CSS背景图像（http://www.w3schools.com/cssref/pr_background-image.asp）值只能是URL。如果你的html文件名是例如：'my_file.html'，它可能会工作，比如果有一个散列为：'my_file.html＃test'你只输出图像本身，比你可以在css中使用它作为URL。 – skobaljic

只需将您的svg图像保存在图像文件夹中，并将其作为任何其他图像在您的css文件中使用。你可能还需要使用[background-size]（https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）属性。 – skobaljic

如果您想重用SVG，我能想到的唯一解决方案是将其保存到单独的文件并在后台属性中引用它。 –

-1

你也可以直接在css中包含svg作为base64编码并重用css类。

.spesial { background: url("data:image/svg+xml;utf8,<svg...

https://jsfiddle.net/2wjax28a/

来源

2015-04-23 09:45:00

这是在问题中提到的不需要的，因为那样你就只能在一个地方使用它。 – Persijn

但是你可以在多个元素上使用css类。像这样：https：//jsfiddle.net/2wjax28a/1/ –

如何使用CSS背景的网址到SVG里面的HTML文件

回答

相关问题