如何在HTML中使用外部SVG？
Abd*_*hab 30 css html5 svg css3
我尝试制作一个引用SVG文件的HTML,该SVG文件是交互式的(CSS悬停):
如果我使用
<img src="algerie.svg">我松散的交互性.
如果我使用开发工具在新选项卡中打开此图像,它将变为交互式.
如果我使用:
Run Code Online (Sandbox Code Playgroud)<svg viewBox="0 0 512 512"> <use xlink:href="algerie.svg"></use> </svg>然后没有显示任何内容,更糟糕的是,Chrome或Firefox不会在网络开发工具中检测到该文件.
Nik*_*yar 45
您应该使用<object>标记嵌入图像:
<object data="algerie.svg" type="image/svg+xml"></object>
有关详细信息,请参阅此问题:对于SVG文件,我是否使用<img>,<object>或<embed>？
- 实际上，当使用 CSS 加载到 OBJECT 标记中时，您无法操作任何 SVG 元素，因为对象在其自己的文档中加载 SVG，因此 CSS 无法访问它。但是，您可以使用 JS 来操作它们，这不是一个非常干净的解决方案，而且您还必须执行其他操作，例如等待图像加载，然后使用 JS 操作它。我认为这不是一个好的解决方案。 (14认同)
- 不需要`type ="image/svg + xml"`,最好与`width`和`height`属性一起使用! (2认同)
- 假设SVG有一个`<path>`或`<polygon>`或`<line>`等元素.是否可以通过`<object>`方法为这些元素设置`fill`或`stroke`属性？ (2认同)
- @HemantArora 是的，你可以！您可以选择元素来更改其属性，就像普通的 html 元素一样。此外，您还可以将类绑定到要更改的元素。您可以查看这篇文章了解更多详情 [https://benfrain.com/selecting-svg-inside-tags-with-javascript/](https://benfrain.com/selecting-svg-inside-tags-with-javascript /) (2认同)