如何在不将整个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 pictrue

但我的css风格不起作用

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

Answer 1

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

Answer 2

我认为css需要使用特殊标记粘贴内部SVG标记。