javascript - trim SVG 中的空白 - Fabric JS

Question

我正在尝试将 SVG 字母添加到 Fabricjs Canvas 上。当我导入它时，宽度保持在 1000，而字母实际上不是那个宽度。重要的是宽度是字符的真实宽度，否则字母之间的间距的计算结果会很差。这是字母的 svg 数据:

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M586,504.5h0.2c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0.1-0.8,0.1-1.2H586c-0.8-12.2,3.9-24.2,16-37.3
    c33.3-36.4,40.3-79.6,40.3-129.2c0-91.4,0-167.9,0-254.1c0-23.8-6.2-35-30.8-41.4c-86.6-22.2-161.2-24.6-260.8,9.5
    c0,19.2,0,36.9,0,54.7c0,133,0.2,266,0.2,399c0,133-0.1,266-0.2,399c0,17.8,0,35.5,0,54.7c99.6,34.1,174.2,31.7,260.8,9.5
    c24.6-6.4,31.2-17.6,30.8-41.4c-1.4-84.7,0-169.4,0-254.1c0-50.4-7-92.8-40.3-129.2C589.9,528.6,585.1,516.7,586,504.5z M449.1,207
    v-45.7c0-22.1,17.9-40,40-40c4.7,0,9.5,0,14.3,0c22.2,0,40.1,18,40,40.2c-0.4,81.1-1.8,154.6-1.8,232.4c-1,19.5-22.6,44.5-41.4,55.2
    c-31,17.7-51.2,1.1-51.2-35.3C448.9,344.9,449.1,275.9,449.1,207z M489,885.2c-22.1,0-40-17.9-40-40v-45.7
    c0-68.9-0.2-137.9-0.1-206.8c0-36.4,20.2-53,51.2-35.3c18.8,10.7,40.4,35.7,41.4,55.2c0,77.8,1.4,151.3,1.8,232.4
    c0.1,22.2-17.8,40.2-40,40.2C498.5,885.2,493.7,885.2,489,885.2z"/>
</svg>

我尝试更改 viewBox 和 enable-background 属性中的 1000，但导入到 Canvas 时都没有效果

Answer 1

尝试将 viewBox 更改为 350.7 23.6 291.7 959.3，这是形状的边界(我使用 getBBox() 方法找到它)。

或者你可以尝试这个:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.7 960">
<path d="M236 481.5h0.2c-0.1 -0.4 -0.1 -0.8 -0.1 -1.2c0 -0.4 0.1 -0.8 0.1 -1.2H236c-0.8 -12.2 3.9 -24.2 16 -37.3c33.3 -36.4 40.3 -79.6 40.3 -129.2c0 -91.4 0 -167.9 0 -254.1c0 -23.8 -6.2 -35 -30.8 -41.4c-86.6 -22.2 -161.2 -24.6 -260.8 9.5c0 19.2 0 36.9 0 54.7c0 133 0.2 266 0.2 399c0 133 -0.1 266 -0.2 399c0 17.8 0 35.5 0 54.7c99.6 34.1 174.2 31.7 260.8 9.5c24.6 -6.4 31.2 -17.6 30.8 -41.4c-1.4 -84.7 0 -169.4 0 -254.1c0 -50.4 -7 -92.8 -40.3 -129.2C240 505.6 235.1 493.7 236 481.5zM99.1 184v-45.7c0 -22.1 17.9 -40 40 -40c4.7 0 9.5 0 14.3 0c22.2 0 40.1 18 40 40.2c-0.4 81.1 -1.8 154.6 -1.8 232.4c-1 19.5 -22.6 44.5 -41.4 55.2c-31 17.7 -51.2 1.1 -51.2 -35.3C98.9 321.9 99.1 252.9 99.1 184zM139 862.2c-22.1 0 -40 -17.9 -40 -40v-45.7c0 -68.9 -0.2 -137.9 -0.1 -206.8c0 -36.4 20.2 -53 51.2 -35.3c18.8 10.7 40.4 35.7 41.4 55.2c0 77.8 1.4 151.3 1.8 232.4c0.1 22.2 -17.8 40.2 -40 40.2C148.5 862.2 143.7 862.2 139 862.2z"/>

我已使用 this 将形状翻译为 (-350, -23)所以它应该从 (0, 0) 开始。