当前位置: 首页 > 知识库问答 >
问题:

将SVG组件作为背景图像反应到div

司雅畅
2023-03-14

我试图让样式组件采取反应组件的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});
`;

我正在使用开箱即用的创建-反应-应用程序。

我也尝试过不使用样式组件和使用内联样式,但没有成功。

在这种情况下,是否可以使用SVG作为背景图像,而SVG是一个组件?

共有3个答案

戚阳曜
2023-03-14

实际上,有一种方法可以实现您想要的,而无需SVG作为组件:

以下是更新后的StepBar组件

import React, { Component } from "react";
import StepSVG from "../../components/UI/SVGs/test.svg";
import encodeSVG from '../../lib/encodeSVG';

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: ${encodeSVG(bg, '#FF9900')};
`;

以下是encodeSVGlib文件:

var symbols = /[\r\n"%#()<>?\[\\\]^`{|}]/g;

function addNameSpace(data) {
  if (data.indexOf('http://www.w3.org/2000/svg') < 0) {
    data = data.replace(/<svg/g, "<svg xmlns='http://www.w3.org/2000/svg'");
  }

  return data;
}

function encodeSVG(data) {
  // Use single quotes instead of double to avoid encoding.
  if (data.indexOf('"') >= 0) {
    data = data.replace(/"/g, "'");
  }

  data = data.replace(/>\s{1,}</g, '><');
  data = data.replace(/\s{2,}/g, ' ');

  return data.replace(symbols, encodeURIComponent);
}

var encode = function(svg, fill) {
  if (fill) {
    svg = svg.replace(/<svg/g, `<svg fill="${fill}"`);
  }
  var namespaced = addNameSpace(svg);
  var dimensionsRemoved = namespaced
    .replace(/height="\w*" /g, '')
    .replace(/width="\w*" /g, '')
    .replace(/height='\w*' /g, '')
    .replace(/width='\w*' /g, '');
  var encoded = encodeSVG(dimensionsRemoved);

  var header = 'data:image/svg+xml,';
  var dataUrl = header + encoded;  

  return `url("${dataUrl}")`;
};

你导入svg,并使用一个字符串加载器的svgs与您首选的构建系统(例如WebPack),通过该svg编码SVG,等等!:)

薛彭薄
2023-03-14

不幸的是,你试图实现的目标是不可能的。您必须将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应用一个Webpack加载器,该加载器包括生成的URL到您正在导入的SVG,这可以传递到background-Imagecss属性中。

希望这能有所帮助!

昌招
2023-03-14

对于React SVG背景图像,我发现这是最好的:

// MyComponent.js

import mySvg from './mySvg.svg';

...

function MyComponent() {
  return (
    <div
       className="someClassName"
       style={{ backgroundImage: `url(${mySvg})` }}
    > 

... etc

当webpack捆绑包时,SVG文件的路径会发生变化,因此通过使用模板字符串,您可以保持链接。

在CSS类中,你可以做任何你喜欢的样式。

 类似资料:
  • 问题内容: 这可能吗?以下是我尝试过的方法,但它完全用黑色填充了圆圈。 问题答案: SVG元素的图像填充是通过SVG模式实现的。

  • 问题内容: 我有一个外部SVG文件,其中包含一些嵌入的图案图像标签。每当我使用将该SVG转换为PNG时,生成的PNG图像都不包含我已作为图案应用到某些SVG路径的图像。有什么办法解决这个问题? 问题答案: 是的,有:将svg附加到文档中,并将所有包含的图像编码为dataURIs。 我正在编写一个脚本来执行此操作,还编写了一些其他内容,例如包括外部样式表以及toDataURL失败的其他修复方法(例如

  • 问题内容: 我是Java新手,目前正在创建带有图形的游戏。我有从扩展的此类。在本课程中,我有很多需要图像作为背景的。据我所知,为了能够在JPanel中绘制图像,我需要从JPanel扩展一个单独的类,并且该类的方法可以完成工作。但是我不想为每个类创建单独的类,我的类太多了。而且我只关心背景。我怎样才能做到这一点?带有匿名内部类吗?怎么样? 为了更好地理解,我提供了一些代码: 问题答案: 为什么不制作

  • 问题内容: 这可能吗?以下是我尝试过的方法,但它完全用黑色填充了圆圈。 问题答案: SVG元素的图像填充是通过SVG模式实现的。

  • 问题内容: 此处已触及该主题,但未提供有关如何创建3D图并在平面中以指定高度插入图像的指示。 因此,要提出一个简单且可复制的案例,假设我使用以下代码创建了一个3D图: 在视觉上,我们有: 在级别上,这里是避免重叠的视觉偏移, 我想插入一张图像, 表示曲线显示特定值的元素。 怎么做? 在此示例中,我并不关心元素与其值之间的完美匹配,因此请随时上传您喜欢的任何图像。另外,如果对匹配不满意,有没有办法让

  • 问题内容: 1有1’m使用作为一个搜索页面的背景图像,并使用CSS来设置它,因为1’m内工作1’mJPEG文件Backbone.js的背景: 1要在CSS 3模糊滤镜应用 只 为背景,但1’m不知道如何风格只是一个元素。如果1个试; 正下方,在我的CSS,它的款式整个页面,而不仅仅是背景。有没有办法只选择图像和过滤器适用于?另外,有一种方法只是把模糊关闭页面上的所有其他元素? 问题答案: 你将不得