从svg创建图像不起作用

Question

我一直在尝试从DataURL创建一个映像(使用window.Image类(。此DataURL包含一个svg标记和一个foreignObject。但它只是完全空着。我也试着在画布上画这个图像，但我认为这不是问题所在，因为我甚至无法得到一个看起来正确的图像。

完成的数据URL

data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cdiv%20style%3D%22background-color%3Ared%22%3Etest%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E

模板化的SVG标记

注意：ReactJS组件(<Component />(正在被解析为字符串。但它不包含任何样式，它只是一个简单的div，里面有一些文本

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><foreignObject width="100%" height="100%">${renderToStaticMarkup(
<Component />
)}</foreignObject></svg>`;

模板化的DataURL

const url = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}`;

加载图像

const image = new window.Image(url);
image.src = url;

图像到画布

const ctx = canvas.getContext("2d");
const image = await loadImage(url) // a simple wrapper function which waits for the image to load that returns a promise
ctx.drawImage(image, 0, 0);

Answer 1

如果您打开完成的URL，您可以看到没有红色背景对象，我认为这是因为div元素没有呈现或甚至不存在。

尝试将div元素中的xmlns属性设置为http://www.w3.org/1999/xhtml，如下所示：

data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3CforeignObject%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22200%22%20height%3D%22200%22%3E%0A%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22background-color%3A%20red%22%3Etest%3C%2Fdiv%3E%0A%20%20%20%20%3C%2FforeignObject%3E%3C%2Fsvg%3E

示例：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<foreignObject x="0" y="0" width="200" height="200">
<div xmlns="http://www.w3.org/1999/xhtml" style="background-color: red">test</div>
</foreignObject>
</svg>

参考：

ForeignObject：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

Answer 2

我在呼吸练习应用程序上遇到了类似的问题。我的应用程序徽标应该显示在主页上，当我尝试添加它时不会出现。以下是我修复它的方法。

尝试将.svg文件作为模块添加到react应用程序env.d文件中。

只需在文件列表中添加以下行，

declare module '*.svg'

然后像往常一样导入文件，

import imageName from './filePath'

您应该能够在img标记中使用svg，并且没有任何问题。