样式SVG加载到HTML作为内容标签与CSS [英] Style SVG loaded to HTML as content tag with CSS
问题描述
我有3个档案：
index.html
<！DOCTYPE html>
< html>
< head>
< link type =text / css =stylesheethref =style.css/>
< / head>
< body>
< i class =logo myRedaria-hidden =true>< / i>
< / body>
< / html>
style.css
.logo：之前{
content：url（logo.svg）;
}
.myRed {
color：＃ff2000;
}
logo.svg
<？xml version =1.0encoding =utf-8？>
<！DOCTYPE svg PUBLIC - // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
< svg version =1.1xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/ xlink
width =300height =100>
< rect id =logowidth =300height =100/>
< / svg>
如何在CSS中设置svg内容？ （例如color，font-size，...） - 就像在FontAwesome中一样。 你不能。
CSS content：url（image.ext）类似于将图片加载到< img> 标记。并且在< img> 中加载图片是在一个孤立的文档中加载的，任何人都无法访问，并且无法访问任何东西。
FontAwesome不会加载这样的图标，它们会创建字体，然后在 content 属性中调用相应的字符，例如类似于\f07b。
因此，对于浏览器，FontAwesome图标只是文本，您可以像任何其他文本一样对其进行设置。 / p>
要通过css设置svg，它需要与样式表位于同一个文档中。
好的，有一个黑客可以帮助你，但我不能说它有多好，也不会被支持：
Lea Verou 演示了我们可以（ab）使用 target： CSS选择器以及 #elem_id 片段标识符显示特定节点一个SVG元素或应用特定的规则。
在您的svg的< style> 中，您可以创建像这些规则：
＃elem_id_1：target〜#elem_to_color {
fill：red;
}
＃elem_id_2：target〜#elem_to_color {
fill：green;
}
然后在你的标记中，你只需要在 #elem_to_color 以及相应的id。
< g id =elem_id_1 >< / g取代;
< g id =elem_id_2>< / g>
< rect id =elem_to_color/>
现在，当您将您的svg加载为 yourfile.svg＃elem_id_1 ，第一条规则将适用， #elem_to_color 将为红色。如果您将它加载为 yourfile.svg＃elem_id_2 ，那么 #elem_to_color 将为绿色。
这个hack允许有一个单独的svg文件，我们可以在其中从外部控制渲染的样式。
/ *所有颜色的单个文件* /。logo :: after {content：url（https://dl.dropboxusercontent.com/s /2pkolmx0d9pebgl/logo.svg);}.logo.green::after {content：url（https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green）;} .logo.red :: after {content：url（https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red）;}
<！ - logo.svg content< svg version =1.1xmlns =http://www.w3.org/2000/svgwidth = 30height =30> <风格> #green：target〜#elem_to_color {fill：green; } #red：target〜#elem_to_color {fill：red; }< / style> < g id =red>< / g> < g id =green>< / g> < rect id =elem_to_colorwidth =30height =30/>< / svg> - >< i class =logo>< / i>< i class = logo green>< / i>< i class =logo red>< / i>
I have 3 files:
index.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<i class="logo myRed" aria-hidden="true"></i>
</body>
</html>
style.css
.logo:before {
content: url("logo.svg");
}
.myRed {
color: #ff2000;
}
logo.svg
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="300" height="100">
<rect id="logo" width="300" height="100" />
</svg>
How to style svg content in CSS? (eg. color, font-size, ...) - like in FontAwesome.
You can't.
CSS content: url(image.ext) is similar to loading your image in a <img> tag. And loading an image in a <img> is under the hood loading it in an isolated document, inaccessible for anyone, and which can't access anything.
FontAwesome doesn't load icons like that, they build font-faces, and then call corresponding characters in the content property, e.g something like "\f07b".
So for the browser, FontAwesome icons are just text, and you can style it like any other text.
To style an svg through css, it needs to be in the same document as your stylesheet.
Ok, there is one hack, which may help you, but I can't tell how well it is nor will be supported :
Lea Verou demonstrated that we can (ab)use the target: CSS selector along with the #elem_id fragment identifier to show specific nodes of an SVG Element or apply specific rules.
In you svg's <style> you can create rules like these ones :
#elem_id_1:target ~ #elem_to_color{
fill: red;
}
#elem_id_2:target ~ #elem_to_color{
fill: green;
}
Then in your markup, you just need to have some empty elements placed before #elem_to_color with corresponding ids.
<g id="elem_id_1"></g>
<g id="elem_id_2"></g>
<rect id="elem_to_color"/>
Now when you will load your svg as yourfile.svg#elem_id_1, the first rule will apply and #elem_to_color will be red. If you load it as yourfile.svg#elem_id_2, then #elem_to_color will be green.
This hack allows to have a single svg file, on which we can externally control the rendered styles.
/* a single file for all colors */
.logo::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg);
}
.logo.green::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#green);
}
.logo.red::after {
content: url(https://dl.dropboxusercontent.com/s/2pkolmx0d9pebgl/logo.svg#red);
}
<!-- logo.svg content
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
<style>
#green:target ~ #elem_to_color{
fill: green;
}
#red:target ~ #elem_to_color{
fill: red;
}
</style>
<g id="red"></g>
<g id="green"></g>
<rect id="elem_to_color" width="30" height="30"/>
</svg>
-->
<i class="logo"></i>
<i class="logo green"></i>
<i class="logo red"></i>
这篇关于样式SVG加载到HTML作为内容标签与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
