我想改变svg图标的笔触颜色，当点击它在角度2或4？

Question

它不工作，谁能给出解决方案？？

this is svg icon code.

<svg id="Home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.28 43.49">
  <defs>
    <style>
      .cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:2.27px;}
    </style></defs>
  <title>Home</title>
  <polygon id="home-2" data-name="home" class="cls-1" points="26.18 1.31 1.17 15.82 1.16 16.72 8.26 16.72 8.26 42.36 21 42.36 21 31.16 31.36 31.16 31.36 42.36 44.1 42.36 44.1 16.72 51.11 16.72 51.09 15.76 26.18 1.31"/>
</svg>

此代码用于在另一个html类中调用图像。

<a id="HomeFabricButton" [ngStyle]="{'background': status, 'border-radius':ChangeRadius}">
    <img src="../../../images/Home.svg" title="Home" [ngStyle] = "{'clas-1.stroke':changeColor}" (click)="ChangeStatus()" />
</a>

Answer 1

如果您想在svg中传递样式而不直接在页面上放置svg内容，那么唯一的方法就是使用svg parameters。

但是没有浏览器支持这一点，所以您必须包含一个polyfill

PS:我已经尝试过了，而且它工作正常，但请确保你阅读了我引用的页面上的所有通知：

注意，这些示例是由Javascript原型模拟的。它应该可以在Opera、Firefox和Safari中运行，也许还可以在其他浏览器中运行(Chrome？插件？)。该脚本可以按原样使用，并在CC许可证下发布，但不打算用作生产代码。鼓励内容作者试用此代码，并根据经验向SVG工作组提出建议和评论，网址为www-svg@w3.org。