InkScape 为 D3js 图中的节点使用嵌入的 xlink:href SVG 文件对 SVG 进行像素化

Question

我在 D3js 中使用 svg 作为矩形节点制作了一个树形图。这是它的 bl.ock： http://bl.ocks.org/Coola85/2450007804d9508866616640ac1272b8/fea7a37158edf9accd749a6fa3399800bea9bbad 浏览器中的输出如下所示，目的是能够将其保存为 SVG：我使用 SVG Crowbar (https://nytimes.github.io/svg-crowbar/) 通过 Google Chrome 保存 svg。当我尝试在 InkScape 中打开 svg 时，它会对矩形进行像素化处理，看起来像这样。 Adobe Illustrator 完全无法打开矩形，说明需要插件。我到处搜索，但不存在这样的插件。我想找到一种方法使图像（在本例中为矩形）仍然显得清晰并且是矢量 paths/shapes。 inkscape 的 XML 编辑器显示它正在为 svg 文件使用 xlink:href ，如下所示。

这是主 SVG 文件输出的代码：

<?xml version="1.0" standalone="no"?>
<svg width="960" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family:serif;height:500px;perspective-origin:480px 250px;transform-origin:480px 250px;width:960px;-moz-text-size-adjust:auto;">
    <g transform="translate(120,20)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
        <path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(255, 0, 0);stroke-width:2px;" d="M0,230C90,230 90,115 180,115" />
        <path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(0, 128, 0);stroke-width:2px;" d="M0,230C90,230 90,345 180,345" />
        <g class="node" transform="translate(180,345)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
            <image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
            <text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: B</text>
        </g>
        <g class="node" transform="translate(180,115)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
            <image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
            <text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: A</text>
        </g>
        <g class="node" transform="translate(0,230)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
            <image xlink:href="rect.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
            <text x="-15" dy=".35em" text-anchor="end" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;text-anchor:end;">Top Level</text>
        </g>
    </g>
</svg>

感谢任何帮助

Answer 1

这在当前的 Inkscape 版本 (0.92.3) 和支持显示链接的 SVG 文件的早期版本中是预期的。

下一个主要版本仍会将嵌入和链接的 SVG 文件显示为光栅图像，但它允许您设置导入分辨率，这样您就可以将它们设置得足够大，这样它们就会显得清晰。

但这就是它在 Inkscape 中显示的方式 - 如果您打算稍后在浏览器中使用 SVG 文件，那么它看起来是否丑陋并不重要编辑它。如果浏览器（或您打算使用的任何其他程序）可以正确显示链接的 SVG 图像，它看起来是正确的。

如果您需要导出 PNG 图像，那么您应该考虑导入矩形，也许使用克隆。您可以使用对齐+分布对话框来交换对象的位置，这样可以轻松地将它们放置在与之前完全相同的位置。

InkScape 为 D3js 图中的节点使用嵌入的 xlink:href SVG 文件对 SVG 进行像素化

InkScape pixelates SVG with embedded xlink:href SVG files for nodes in a D3js graph

svg

inkscape

d3.js