- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试渲染一个返回 <svg>
的 React 组件作为 backgroundImage
的 <div>
.
目前我正在使用 ReactDOMServer
与 renderToStaticMarkup
或 renderToString
但没有显示:
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>
)
}
最佳答案
您必须使用 encodeURIComponent()
对 SVG 数据进行 URI 编码,因为如果不是 URI 编码,React 将不会渲染 SVG 数据。所以,
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 中设置了相同的,
关于reactjs - 将 React SVG 组件渲染为 backgroundImage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57789530/
我在下面的代码中将UITableViewCell的所有背景图像设置为相同的模式: - (void) tableView:(UITableView *)tableView willDisplayCell
我想在表格 View 中创建一个简单的复选框。首先,我在 Storyboard中创建 View ,每个元素在单元格中都有一个标签。然后我在 Controller.m 中编写了代码 - (UITable
我正在尝试让背景图像交替。它以前是工作的,但现在有些东西已经关闭了。现在背景与 CSS 设置的相同,我想更改它以替换它。 var widthOfBrowser = window.innerWidth;
首先我制作了一个带有拖放功能的桌面 AIR 应用程序来查看图 block 图像,但由于一些问题,我尝试在 C# 中制作相同的应用程序。你认为什么是更好的选择? (我知道这个小程序的性能不是问题,但我的
这个问题在这里已经有了答案: What do querySelectorAll and getElementsBy* methods return? (12 个答案) 关闭 6 年前。
这是我从图像 url 获取流的方式: using (var httpClient = new HttpClient()) { response
我是 Java 的新手,我想将背景图像添加到 Composite。我只能使用 SWT,不能使用 JFace。我正在使用 eclipse indigo IDE (3.8),当我想设置背景图像时,首先我将
我正在构建一个程序,该程序从数组中随机选择图像并将其显示到屏幕上。现在,我计划使用一个数组来存储各种图像 url,这些图像 url 可以由一个函数引用,该函数随机选择其中一个并使用该值来设置特定元素的
我最近从业务应用程序编程转向尝试(作为一种爱好)在 .NET (C#) 中创建纸牌游戏实现。当然,我遇到了一些差异,其中之一是游戏应用程序的图形特性。 本能地,我将所有用作窗体和控件背景的图像保存为
我在页面上有一个使用 css 设置背景图像的元素: // CSS snippet .mystyle { background-image: url(some_image.gif); /
情况 我正在使用 BackgroundImage 为 JavaFX 区域设置背景,如下所示: region.setBackground(Background(BackgroundImage(Image
我已经尝试了所有我能想到的方法,并且用谷歌搜索到了死。我无法让 React 使用内联样式加载背景图像。这是我的代码: const url = './assets/backgrounds/terzo1.
现在我正在写这个来设置 UIBarButtonItem 的背景图像: [[UIBarButtonItem appearance] setBackgroundImage:image forState:U
我使用 javascript 来显示我的背景图像,因为我希望在每次重新加载时都有一个随机背景图像。不管怎样,正因为如此,我典型的 CSS 过渡和动画不起作用,因为它不是淡化背景,而是淡化我体内的文本。
我有一个 JavaFX 元素,我在其中定义了如下背景: setBackground(new Background(new BackgroundImage(new Image("/images/Acht
我有一个包含不同路由的 Meteor 元素。 在我的一个 css 文件中有: body { font-family: 'Roboto', sans-serif; font-size:
我想在 Label 上设置背景图片。我发现 Microsoft不允许这样做。但是,我想自己实现。代码在下面,问题是如何以编程方式设置背景图像?仍然没有要设置的 BackgroundImage 属性。
我有一个窗口窗体,我在其中将 BackgroundImage 属性设置为自定义位图图像。 private Image MakeCustomBackground(){ Bitmap result
我有这个代码: myButton.setBackgroundImage(UIImage(named: "image1"), for: .normal) 我正在尝试从代码级别为按钮添加背景。我想设置适合
在 UIButton 上我设置这样的背景图像 [twitterButton setBackgroundImage:twitterImage forState:UIControlStateNormal]
我是一名优秀的程序员,十分优秀!