导入SVG至Inkscape时<use>标签失效，是Bug还是特性？

嘿，这个问题我之前也碰到过！这可不是Inkscape的特性，而是它处理嵌套SVG时的一个兼容性小bug——毕竟Chrome的SVG渲染引擎和Inkscape内部的解析逻辑不太一样，Chrome更严格遵循SVG标准，而Inkscape对嵌套

下面给你几个实用的解决办法，不管你的组有多复杂都能适用：

办法一：移除嵌套的

把嵌套的

<svg width="400" height="200" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="plus">
      <circle cx="40" cy="30" r="20" stroke="#FF0000" fill="none"></circle>
    </g>
  </defs>
  <!-- 原嵌套svg的x=100，y=50，所以给内部元素加上这个偏移 -->
  <rect x="101" y="51" width="78" height="86" rx="10" ry="10" stroke="#0000FF" fill="none"></rect>
  <use href="#plus" x="100" y="50"></use>
  <text x="120" y="124" width="68" height="26">ABCD</text>
</svg>

办法二：将移到嵌套

如果必须保留嵌套的

<svg width="400" height="200" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
  <svg x="100" y="50">
    <defs>
      <g id="plus">
        <circle cx="40" cy="30" r="20" stroke="#FF0000" fill="none"></circle>
      </g>
    </defs>
    <rect x="1" y="1" width="78" height="86" rx="10" ry="10" stroke="#0000FF" fill="none"></rect>
    <use href="#plus"></use>
    <text x="20" y="74" width="68" height="26">ABCD</text>
  </svg>
</svg>

办法三：在Inkscape中转换引用为原件 #

如果已经导入了SVG文件，不想修改代码的话，可以这样操作：

• 打开SVG后，先选中那个不显示的元素（可以通过Inkscape的"对象"面板找到对应的元素）
• 点击顶部菜单的对象 > 克隆 > 转换为原件（不同版本可能叫"Make Copy of Clone"）
• 这样引用的组就会被直接复制到画布上，和Chrome里的显示效果一致了

内容的提问来源于stack exchange，提问作者SiliconValley