但是,当包含如下的SVG时,CSS不会被应用.任何有这个解决方案的人,或者不可能链接到< img src =“...”/>引用的SVG中的其他(CSS)文件.
请参阅下面的示例代码.在浏览器中直接加载pic.svg时,所有样式都可以应用,可以看到一个绿色的矩形.但是当打开page.htm全部都看到是一个黑色的矩形.所以显然没有一个定义的样式被应用.
page.htm
<!DOCTYPE html> <html> <body> <img src="pic.svg" style="width: 100px; height: 100px;" /> </body> </html>
pic.svg
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <?xml-stylesheet type="text/css" href="styles.css" ?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" > <rect x="10" y="10" width="80" height="80" /> </svg>
styles.css的
rect { stroke: black; fill: green; }
编辑
从一个答案,这个短暂的时间出现在这里,我得到了this link to the spec和以下引文.在我看来,这表示上述代码应该工作!
Stand-alone SVG document embedded in an HTML or XML document with the ‘img’,‘object’ (HTML) or ‘image’ (SVG) elements
[…]
Citing from your link “Style sheets defined anywhere within the referenced SVG document (in style elements or style attributes,or in external style sheets linked with the style sheet processing instruction) apply across the entire SVG document,but do not affect the referencing document (perhaps HTML or XHTML).”
解决方法
原文地址:https://www.jb51.cc/html/230652.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。