将SVG组件作为背景图像传递给div [英] React SVG component as background-image to div

问题描述

我正在尝试获取样式组件以采用作为反应组件的SVG并将其设置为背景图像，但出现错误:

I am trying to get styled-components to take an SVG that is a react component and set it as a background-image but I get the error:

TypeError:无法将符号值转换为字符串

TypeError: Cannot convert a Symbol value to a string

SVG组件代码:

import React from "react";

const testSVG = props => {
  return (
    <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">
      <g>
        <g>
          <g>
            <path
              fill="#434343"
              class="st0"
              d="M162.4,116c-4.6,7.5-15.6,13.6-24.4,13.6H16c-8.8,0-12.3-6.2-7.7-13.7c0,0,4.6-7.7,11.1-18.4
                c4.4-7.4,8.9-14.7,13.3-22.1c1.1-1.8,6.1-7.7,6.1-10.1c0-7.3-15-24.9-18.5-30.7C13.5,23.6,8.3,14.9,8.3,14.9
                C3.7,7.4,7.2,1.2,16,1.2c0,0,65.9,0,106.8,0c10,0,25.9-4.5,33.5,3.8c8.7,9.3,15.5,25.4,22.5,36.8c2.6,4.2,14.5,18.3,14.5,23.8
                c-0.1,7.6-16,26.1-19.6,32C167.1,108.3,162.4,116,162.4,116z"
            />
          </g>
        </g>
      </g>
    </svg>
  );
};

export default testSVG;

容器组件代码:

import React, { Component } from "react";
import StepSVG from "../../components/UI/SVGs/Test";

class StepBar extends Component {
  render() {
    const { steps } = this.props;

    return (
      <div>
        {steps
          ? steps.map(step => {
              return (
                <Wrap key={step._id} bg={StepSVG}>
                  <P>
                    {" "}
                    <Link to={"/step/" + step._id}>{step.title} </Link>
                  </P>
                </Wrap>
              );
            })
          : null}
      </div>
    );
  }
}

export default StepBar;

const Wrap = styled.div`
  padding: 30px 30px 0 0;
  display: inline-block;
  background-image: url(${props => props.bg});
`;

我正在使用开箱即用的create-react-app.

I am using create-react-app out of the box.

我也尝试不使用样式化的组件，而是使用内联样式，但没有成功.

I also tried without using styled components and used inline styles in place to no success.

在这种情况下，是否可以将SVG用作背景图像?

Is it possible to use an SVG as a background-image in this context with the SVG being a component?

推荐答案

不幸的是，您试图实现的目标是不可能的.您必须将SVG保留为实际的.svg文件(并链接到该文件)，或者做一些CSS技巧来将SVG组件放置在前景组件的后面.

Unfortunately, what you're trying to achieve is not possible. You'll have to keep your SVG as an actual .svg file (and link to that), or do some CSS trickery to place SVG component behind your foreground-component.

换句话说:

<!-- step.svg -->
<svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 193.3 129.7">
  <!-- copy paste your svg here -->
</svg>

在您的组件中:

import stepSvgUrl from "../../components/UI/SVGs/step.
// ...
<Wrap key={step._id} bg={stepSvgUrl}>

当您导入这样的SVG文件时，create-react-app会将包含生成的URL的Webpack加载器应用到您要导入的SVG中-可以将其传递到background-image css属性中.

When you import an SVG file like that, create-react-app applies a Webpack loader that includes the generated URL to the SVG you're importing - which is fine to pass into the background-image css property.

希望这会有所帮助！

这篇关于将SVG组件作为背景图像传递给div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！