将SVG组件作为背景图像传递给div

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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。

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

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

回答：

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

换一种说法：

<!-- 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-imagecss属性。

希望这可以帮助！

以上是 将SVG组件作为背景图像传递给div 的全部内容， 来源链接： utcz.com/qa/423628.html

回到顶部