reactjs - 将 React SVG 组件渲染为 backgroundImage
问题描述
我正在尝试渲染一个返回 a<svg>
作为 abackgroundImage
的React 组件<div>
。目前我正在使用ReactDOMServer
with renderToStaticMarkup
orrenderToString
但没有显示:
const SvgComponent = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg'><rect fill='red' x='0' y='0' /></svg>
)
}
const ParentComponent = () => {
return (
<div
className={classes.banner}
style={{
backgroundImage: `url("data:image/svg+xml;utf8, ${ReactDOMServer.renderToStaticMarkup(<SvgComponent />)} ")`
}}
>
</div>
)
}
jsx-to-string包会以这种方式实现吗?
解决方案
您必须使用encodeURIComponent()
URI 对 SVG 数据进行编码,因为如果 SVG 数据未经过 URI 编码,React 将不会渲染它。所以,
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
<rect>
此外,设置SVG的宽度和高度,例如,
<rect fill="red" width={100} height={100} />
所以最终的代码应该是这样的,
import ReactDOM from "react-dom";
import { renderToStaticMarkup } from "react-dom/server";
import React from "react";
const SvgComponent = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg">
<rect fill="red" width={100} height={100} />
</svg>
);
};
const ParentComponent = () => {
const svgString = encodeURIComponent(renderToStaticMarkup(<SvgComponent />));
return (
<div
style={{
backgroundImage: `url('data:image/svg+xml;utf8, ${svgString}')`,
width:500,
height:500
}}
>
</div>
)
}
ReactDOM.render(<ParentComponent />, document.getElementById("root"));
我在 CodeSandbox 中设置了相同的,
推荐阅读
- logging - iis7/iis10 应用程序池重启/关闭日志在哪里?我怎样才能找到它?
- json - 如何使用 Python jsonpath_ng 过滤器和其他扩展功能?
- macos - mac sed 在匹配的内容之前添加新行
- tidb - 如何删除离线集群节点的监控数据?
- oracle-apex - 将选定记录从交互式网格复制到另一个 Oracle apex5.1
- python - 如何使用 Python 脚本运行 Excel 宏?
- opencv - 如何从图像中去除光影般的颜色
- angular - 如何在 Angular 中创建应用程序级别的全局计时器?
- sharepoint - 远程服务器返回错误:(401) Unauthorized - CSOM - OAuth - after specific time
- mysql - 按性别计算范围年龄