在React中作为组件引入的SVG元素的颜色

时间：2019-01-14 09:28:44

标签： reactjs svg

我有一个基本的SVG图像，该图像具有几个路径以形成简单的形状。我想做的是通过React导入图像，并能够通过创建的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对象。

1 个答案:

答案 0 :(得分：0)

您可以尝试使用一些CSS实现此目的。 为包含svg的div（即d = dict(zip(varpr['values'], varpr['names'])) print(d) # {'pr': 'Precipitation [mm]', 'tas': 'Temperature [C deg]'} print(d['pr']) # Precipitation [mm] ）分配一个类，然后应用这样的CSS 

container
相关问题
最新问题