时间戳

首页 > 解决方案 > 在 React 中更改作为组件引入的 SVG 元素的颜色

reactjs - 在 React 中更改作为组件引入的 SVG 元素的颜色

问题描述

我有一个基本的 SVG 图像，它有几个路径可以形成一个简单的形状。我想做的是通过 React 导入图像，并能够通过创建的反应组件更改图像的颜色。

示例代码（如下所述）用于绘制 SVG 元素并调整高度和宽度。我想要做的是改变path1的颜色。

我尝试将填充更改为等于变量（https://css-tricks.com/creating-svg-icon-system-react/），但这似乎不适用于当前形式。如果我将我的 SVG 元素从单独的文件复制到代码中，但它似乎可以工作。如果可能的话，从保持我的代码整洁和易于更新图像的角度来看，我想尽量避免这种情况。

我错过了什么吗？

非常感谢您的任何回复。

下面是我的课

import Key from '~/resources/svg/key.svg'
import React, { Component } from 'react'

export default class KeyDisplay extends Component {

    render() {
        return (
            <div>
                <Key width="1000" height="500" />
            </div>
        )
    }
}

下面是key.svg的内容

<svg id="svg" version="1.1" width="400" height="191.98140615920974" viewBox="0 0 400 191.98140615920974" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ><g id="svgg"><path id="path0" d="M286.606 25.563 C 257.685 26.993,230.957 47.417,223.017 74.154 L 222.741 75.084 142.147 75.084 L 61.553 75.084 50.315 86.317 L 39.078 97.550 53.048 111.521 L 67.018 125.491 74.844 117.666 C 79.149 113.363,82.757 109.842,82.862 109.843 C 82.967 109.843,86.632 113.431,91.006 117.816 C 98.916 125.743,98.962 125.785,99.360 125.430 C 99.786 125.049,117.133 110.548,117.827 109.992 C 118.285 109.626,116.968 108.585,132.181 121.337 L 137.527 125.818 139.191 124.215 C 140.774 122.690,146.312 117.391,151.856 112.096 L 154.409 109.658 155.244 110.278 C 155.960 110.809,157.680 112.122,165.242 117.910 C 169.648 121.281,171.649 122.807,173.488 124.195 L 175.590 125.780 200.853 125.785 L 226.116 125.790 226.692 127.081 C 229.129 132.538,234.457 140.102,239.556 145.343 C 269.965 176.596,320.661 173.295,346.845 138.358 C 364.337 115.019,365.502 82.599,349.728 58.089 C 335.916 36.628,312.007 24.308,286.606 25.563 M327.871 75.934 C 343.459 79.650,349.083 99.010,337.925 110.544 C 326.283 122.578,305.964 116.739,302.634 100.402 C 299.581 85.422,313.020 72.394,327.871 75.934 " stroke="none" fill="#fbfbfb" fill-rule="evenodd"></path><path id="path1" d="M1.728 96.111 L 1.728 190.494 199.904 190.494 L 398.080 190.494 398.080 96.111 L 398.080 1.728 199.904 1.728 L 1.728 1.728 1.728 96.111 M296.303 25.750 C 312.785 27.304,327.458 33.953,339.030 45.113 C 372.657 77.541,366.506 132.547,326.548 156.748 C 300.637 172.442,267.078 169.549,244.049 149.635 C 237.114 143.638,229.899 134.262,226.692 127.081 L 226.116 125.790 200.853 125.785 L 175.590 125.780 173.488 124.195 C 171.649 122.807,169.648 121.281,165.242 117.910 C 157.680 112.122,155.960 110.809,155.244 110.278 L 154.409 109.658 151.856 112.096 C 146.312 117.391,140.774 122.690,139.191 124.215 L 137.527 125.818 132.181 121.337 C 116.968 108.585,118.285 109.626,117.827 109.992 C 117.133 110.548,99.786 125.049,99.360 125.430 C 98.962 125.785,98.916 125.743,91.006 117.816 C 86.632 113.431,82.967 109.843,82.862 109.843 C 82.757 109.842,79.149 113.363,74.844 117.666 L 67.018 125.491 53.048 111.521 L 39.078 97.550 50.315 86.317 L 61.553 75.084 142.147 75.084 L 222.741 75.084 223.017 74.154 C 231.977 43.983,264.169 22.721,296.303 25.750 M320.691 75.403 C 303.175 77.793,295.969 98.804,308.467 111.044 C 322.658 124.941,346.438 112.664,343.553 92.931 C 341.988 82.232,331.209 73.968,320.691 75.403 " stroke="none" fill="#44ac64" fill-rule="evenodd"></path></g></svg>

将代码更改为以下内容确实有效。但是，如果可能的话，我希望将图像分开。（注意的区别：xmlns 和 xmlns:xlink 已被删除。fill-rule 已根据编译器的要求更改为 fillRule）

import Svg from '~/resources/svg/domain-credentials.svg'
import Svg2 from '~/resources/svg/domain-credentials2.svg'
import React, { Component } from 'react'

export default class DomainCredentials extends Component {

    render() {
        const color = "#645484" 
        return (
            <div>
                <svg id="svg" version="1.1" width="800" height="400" viewBox="0 0 400 191.98140615920974" ><g id="svgg"><path id="path0" d="M286.606 25.563 C 257.685 26.993,230.957 47.417,223.017 74.154 L 222.741 75.084 142.147 75.084 L 61.553 75.084 50.315 86.317 L 39.078 97.550 53.048 111.521 L 67.018 125.491 74.844 117.666 C 79.149 113.363,82.757 109.842,82.862 109.843 C 82.967 109.843,86.632 113.431,91.006 117.816 C 98.916 125.743,98.962 125.785,99.360 125.430 C 99.786 125.049,117.133 110.548,117.827 109.992 C 118.285 109.626,116.968 108.585,132.181 121.337 L 137.527 125.818 139.191 124.215 C 140.774 122.690,146.312 117.391,151.856 112.096 L 154.409 109.658 155.244 110.278 C 155.960 110.809,157.680 112.122,165.242 117.910 C 169.648 121.281,171.649 122.807,173.488 124.195 L 175.590 125.780 200.853 125.785 L 226.116 125.790 226.692 127.081 C 229.129 132.538,234.457 140.102,239.556 145.343 C 269.965 176.596,320.661 173.295,346.845 138.358 C 364.337 115.019,365.502 82.599,349.728 58.089 C 335.916 36.628,312.007 24.308,286.606 25.563 M327.871 75.934 C 343.459 79.650,349.083 99.010,337.925 110.544 C 326.283 122.578,305.964 116.739,302.634 100.402 C 299.581 85.422,313.020 72.394,327.871 75.934 " stroke="none" fill="#fbfbfb" fillRule="evenodd"></path><path id="path1" d="M1.728 96.111 L 1.728 190.494 199.904 190.494 L 398.080 190.494 398.080 96.111 L 398.080 1.728 199.904 1.728 L 1.728 1.728 1.728 96.111 M296.303 25.750 C 312.785 27.304,327.458 33.953,339.030 45.113 C 372.657 77.541,366.506 132.547,326.548 156.748 C 300.637 172.442,267.078 169.549,244.049 149.635 C 237.114 143.638,229.899 134.262,226.692 127.081 L 226.116 125.790 200.853 125.785 L 175.590 125.780 173.488 124.195 C 171.649 122.807,169.648 121.281,165.242 117.910 C 157.680 112.122,155.960 110.809,155.244 110.278 L 154.409 109.658 151.856 112.096 C 146.312 117.391,140.774 122.690,139.191 124.215 L 137.527 125.818 132.181 121.337 C 116.968 108.585,118.285 109.626,117.827 109.992 C 117.133 110.548,99.786 125.049,99.360 125.430 C 98.962 125.785,98.916 125.743,91.006 117.816 C 86.632 113.431,82.967 109.843,82.862 109.843 C 82.757 109.842,79.149 113.363,74.844 117.666 L 67.018 125.491 53.048 111.521 L 39.078 97.550 50.315 86.317 L 61.553 75.084 142.147 75.084 L 222.741 75.084 223.017 74.154 C 231.977 43.983,264.169 22.721,296.303 25.750 M320.691 75.403 C 303.175 77.793,295.969 98.804,308.467 111.044 C 322.658 124.941,346.438 112.664,343.553 92.931 C 341.988 82.232,331.209 73.968,320.691 75.403 " stroke="none" fill={color} fillRule="evenodd"></path></g></svg>

            </div>
        )
    }
}

编辑 我希望能够根据代码中其他位置的用户要求创建多种颜色的多个 Key 或 KeyDisplay 对象。

标签： reactjssvg

解决方案

您可以尝试使用一些 css 来实现这一点。为包含 svg的 div （即container）分配一个类，然后应用这样的 css

.container #path1 {
  fill: #645484;
}

推荐阅读