InkScape使用嵌入式xlink：href SVG文件为D3js图形中的节点像素化SVG

Question

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

以下是主要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图像，则应考虑导入矩形，也许使用克隆。您可以使用align + distribute对话框来交换对象的位置，这样可以轻松地将它们放置在与之前完全相同的位置。