Question

在不使用CSS或不直接修改文件的情况下，是否有人对更改svgicon的颜色/属性有任何提示/知识？

例如：

const style = {
  somestyle: {
    random style configs
  }
}

<svgIcon className={somestyle} />

甚至可以在不使用CSS或不直接修改文件的情况下，将svgIcon更改为不同于默认颜色的颜色吗？

或者也许更容易使用和修改matieral-ui提供的svg？

Answer 1

您可以使用javascript修改相应SVG元素的样式。

<html>
<head>
    <script>
      function setColor(color)
      {
        document.getElementById("rect").style.fill = color;
      }
    </script>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px">
    <rect x="50" y="20" rx="10" ry="10" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />
</svg>

  <button onclick="setColor('red');">Red</button>
  <button onclick="setColor('green');">Green</button>
  <button onclick="setColor('blue');">Blue</button>
</body>
</html>

http://jsfiddle.net/VDzGG/

无需使用CSS或修改SVG文件即可修改SVG颜色

1 个答案: