从HTML引用时，没有出现将SVG嵌入另一个SVG中作为图像出现的情况 [英] Embedding an SVG within another SVG as an Image is not appearing when referenced from HTML

问题描述

我不确定标题的正确用词方式，但这就是正在发生的事情.

I wasn't sure how to word it correctly for the title, but here's what is happening.

我在同一文件夹中有两个SVG文件，分别为shapes.svg和wrapper.svg

I have two SVG files within the same folder, shapes.svg and wrapper.svg

wrapper.svg引用带有图片标签的shapes.svg

wrapper.svg references shapes.svg with an image tag

<image x="-75" y="-100" width="150" height="150" xlink:href="shapes.svg" />

现在，如果我直接在Web浏览器中查看wrapper.svg，则可以看到它完美地呈现了shapes.svg.但是，如果我尝试使用HTML文件查看wrapper.svg，该文件是这两个文件之上的一个目录，则可以看到wrapper.svg的所有标记，但它不会显示shapes.svg.

Now if I view wrapper.svg within a web browser directly, I can see it rendering shapes.svg perfectly. However, if I attempt to view wrapper.svg with a HTML file which is one directory above these two files, I can see all the markup of wrapper.svg, but it does not show shapes.svg.

在HTML文件中，我很简单

Within the HTML file I am simple doing

<img src="svg/wrapper.svg" style="width:150px;height:150px;" />

文件夹结构如下

• /index.html
• /svg/wrapper.svg
• /svg/shapes.svg

我发现这很难解释，并尽力解决了这个问题.如果有人需要我进一步澄清任何事情，请问我，我会尽快答复.

I found this a bit difficult to explain, and have attempted my best to relay the problem. If anybody needs me to further clarify anything at all, please do just ask me and I will reply promptly.

推荐答案

出于隐私原因，所有图像都必须是单个文件.您可以在图像中包含图像，但是内部图像必须被编码为数据URI.

For privacy reasons all images must be single files. You can have an image within your image but the inner image must be encoded as a data URI.

当将SVG视为图像时，它会有助于思考...如果这是光栅图像，我可以这样做".

When thinking of an SVG as an image it helps to think... "If this was a raster image, could I do this".

这篇关于从HTML引用时，没有出现将SVG嵌入另一个SVG中作为图像出现的情况的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！