我是svg的新手。我看过w3schools,MDN,css-tricks和一堆youtube tuts。我对于使用svg使用css感到困惑。我是否必须将svg直接放入html中?我想导入svg并且仍然有css工作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<!-- css moved to external file test.css
<style>
#down-glyph {
fill: red;
}
#down-glyph:hover {
fill: green;
}
</style>
-->
</head>
<body>
<!-- svg copied from 'downbracket.svg' this works -->
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 65'>
<polygon id='down-glyph' fill="#e8e899" points=" 0.0,12.419 64.362,65.306 128.732,12.419 108.151,0.944 64.362,35.347 20.573,0.944"/>
</svg>
<!-- svg loads but styling not applied this way
<object id='scroll-down' class='scroll-button' type="image/svg+xml" data="downbracket.svg">alternate here</object>
-->
</body>
</html>
答案 0 :(得分:1)
这是您测试的一个方面(请注意左上角下拉框中使用svg.js 0.x (latest)
扩展名):http://jsfiddle.net/Vac2Q/5531/
HTML:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 129 65'>
<polygon id='down-glyph' fill="#e8e899" points=" 0.0,12.419 64.362,65.306 128.732,12.419 108.151,0.944 64.362,35.347 20.573,0.944" />
</svg>
CSS:
#down-glyph {
fill: red;
}
#down-glyph:hover {
fill: green;
}
是的,您可以在HTML中内联它,但您也可以将其移动到单独的文件中。有几种方法可以插入SVG,你的方式适用于非动态SVG。如果SVG是动态的(交互式),请学习使用<object>
标记。如果SVG是静态的(没有交互),您也可以使用<img src="image.svg" />
标签或CSS来导入SVG,如下所示:
#myelement {
background-image: url(image.svg);
}
答案 1 :(得分:0)
我很担心与svg一起使用css。我是否必须将svg直接放入html?
是
CSS不跨文档边界工作。因此,如果您的HTML中有CSS(或由HTML加载),那么CSS将不适用于外部文件中包含的任何SVG(无论是通过<img>
,<object>
等)。
有一种解决方法。您可以使用脚本加载这些外部文件,并在运行时将它们内嵌到HTML中。