Fabricjs svg导入上的错误控制区域答案

【问题标题】：Fabricjs Wrong controls area on svg importFabricjs svg导入上的错误控制区域
【发布时间】：2016-05-18 20:16:10
【问题描述】：

在 kitchensink 演示 (link) 上，我正在尝试加载此 svg（已分组）：

<?xml version="1.0" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g id="DEFAULT" display="visible">
<path d="M291.94 240.98L292.64 240.79M292.64 240.79L293.16 240.27M293.16 240.27L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.16 207.54M293.16 207.54L292.64 207.02M292.64 207.02L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M293.35 208.24L293.35 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 223.91"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 239.57"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 223.91L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L231.82 207.02M231.82 207.02L231.31 207.54M231.31 207.54L231.12 208.24"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M231.12 239.57L231.31 240.27M231.31 240.27L231.82 240.79M231.82 240.79L232.52 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 206.84L291.94 206.84"
fill="none" stroke="black" stroke-width="0.5"/>
<path d="M232.52 240.98L291.94 240.98"
fill="none" stroke="black" stroke-width="0.5"/>
</g>
</svg>

结果是：

如您所见，我有一个奇怪的选定区域...我如何修复 svg 以便在选择对象时获得正确的控制区域？

提前致谢

【问题讨论】：

标签： svg fabricjs

【解决方案1】：

您需要将这些属性添加到您的 SVG 中，以便它只查看 SVG 在其当前坐标处的一部分。

<svg ... viewBox="231.12 206.84 62.23 34.14">

（我“欺骗”通过在 Illustrator 中打开 SVG 来获取这些值，将画板更改为仅扩展到路径的边缘，然后再次保存文件以查看它会给我什么 viewBox 值（当然如果你能理解“d”属性是如何工作的，我仍然不能完全做到:)，你可能只需要一些算术就可以得到它们。）

【讨论】：