我试图让样式组件采取反应组件的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是一个组件?
实际上,有一种方法可以实现您想要的,而无需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')};
`;
以下是encodeSVG
lib文件:
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,等等!:)
不幸的是,你试图实现的目标是不可能的。您必须将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-Image
css属性中。
希望这能有所帮助!
对于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,它的款式整个页面,而不仅仅是背景。有没有办法只选择图像和过滤器适用于?另外,有一种方法只是把模糊关闭页面上的所有其他元素? 问题答案: 你将不得