html - 如何在不将整个 SVG 标签放入 HTML 的情况下设置部分 SVG 的样式？

Question

我有一个看起来像这样的 SVG

<svg width="589" height="911" xmlns="http://www.w3.org/2000/svg">
   <path class="move-line" d="m459,........... />
   <path d="m277,239c0 ......./>
</svg>

注意我在一条路径上添加了 class="move-line"

然后我复制上面的完整标签并放入我的html文件中

添加CSS

.move-line {
  stroke-dasharray: 10 10; }

然后我得到了我想要的东西

现在问题来了:整个 SVG 标签太大(因为路径)，

将它直接放入我的 html 文件会使我的代码非常大。

有没有可能做这样的事情

<img src="xxx.svg" >

但仍然像把整个 svg 标签放在 html 上一样？？

我试过了

<object data='xxx.svg'></object>

和

<svg width=".." height=".." xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <image xlink:href="method-draw-image (1).svg">
                    </svg>

都显示原始svg图片

但是我的CSS样式不工作

任何帮助都会很棒，谢谢!

Answer 1

我认为你可以通过 jquery 将外部样式添加到 svg 图像，只需将 <object data= "xxx.svg"></object>然后尝试通过使用 jquery 添加类来动态添加样式。如果这不起作用，那么您需要将 svg 图像的整个代码放在 html 页面中。没有其他方法可以在 svg 中使用 css 样式。