时间戳

首页 > 解决方案 > 如何从 HTML 中提取和保存 SVG？

html - 如何从 HTML 中提取和保存 SVG？

问题描述

我会从这个网站提取 SVG 背景：https ://www.jegy.hu/program/a-nagy-gatsby-103655/720007

但是当我保存它时：

<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#" 
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
     xmlns:svg="http://www.w3.org/2000/svg" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
     version="1.1" 
     preserveAspectRatio="xMidYMin" 
     width="1000" 
     height="1000" 
     id="svg19807" 
     sodipodi:docname="3348_structure_háttér.svg" 
     inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" 
     style="transform-origin: left top; transform: translate3d(0px, 0px, 0px) scale(0.53);">
  <metadata id="metadata19813">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>

我收到了这个错误：

Entity 'nbsp' not defined

我在这里红色这个案例：如何在 svg 中显示 html 编码值？

但我无法使用。

那么这个SVG是如何具体的以及如何保存它以便能够将它作为图像打开。

标签： htmlcsssvg

解决方案

不幸的是，没有可靠的方法可以做到这一点，尤其是。用于由 JS 动态生成/修改的 svg。设计软件和网络浏览器在它们支持的 svg 标签以及它们如何呈现它们所支持的标签方面千差万别。Web 浏览器通常非常松散，甚至会尝试呈现最混乱的标记，而设计软件往往相反。

此工具有助于“清理”已被网页破坏的 svg 标记。https://jakearchibald.github.io/svgomg/

我将您想要的 svg 粘贴到工具中，我得到的只是：https ://imgur.com/fj7bDu6 所以我在文本编辑器中检查了标记，文件末尾有一个文本元素不属于任何组。它的 innerXML 仅包含可疑的“nbsp;”。又名非破坏空间。如果我删除那个容器元素，突然我的设计软件会打开 SVG 而没有任何警告。但不幸的是，它看起来仍然不“完整”，事实上，它看起来与它在网络工具中的外观相同。见：https ://imgur.com/1XiMg32

我去更仔细地检查了标记，除了在每个 XML 元素上都有数千个不必要的冗余标记属性之外，似乎没有任何问题太大，所以我怀疑该图形比单个 SVG 更多.

如果您想自己弄乱它，这是稍微修改过的版本 - https://wtools.io/paste-code/b7vg

编辑 - 请参阅此讨论tspan 元素的背景颜色 我怀疑这就是为什么您的 SVG 中缺少这么多内容的原因。除了少数 path 和 rect 元素之外，您的 svg 主要由数百个 text / tspan 元素组成（我假设）用于座位 / 部分显示。在 tspans 上设置背景颜色不是 SVG 规范的一部分，只能使用 HTML/CSS/JS 完成。因此，如果您尝试在 Inkscape 或类似工具中进行编辑，任何彩色的 tspan 要么看起来不可见，要么只显示它们的文本

推荐阅读