为 ObjectBoundingBox 导出 SVG答案

【问题标题】：Export SVG for ObjectBoundingBox为 ObjectBoundingBox 导出 SVG
【发布时间】：2015-05-11 22:25:59
【问题描述】：

我对 SVG 的经验很少，我正在尝试从 illustrator 中保存一条路径，以便它可以用作响应式剪贴蒙版，其大小与其父级相关，使用 clipPathUnits="objectBoundingBox"。

但是，Illustrator 似乎不允许我在 0 和 1 之间使用相对路径值，并且只能导出绝对值。

我怎么能得到这样的代码...

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 100 100">
    <clippath id="clipping-mask">
        <path d="M49.401,64H36.3V30.648h11.201c3.9,0,7.15,0.25,10.501,2.4c4.95,3.15,7.1,8.45,7.1,14.151
    C65.102,56.75,59.352,64,49.401,64z M48.501,38.148h-3.7V56.5h3.65c5.7,0,8.15-3.65,8.15-9.051
    C56.602,42.148,54.252,38.148,48.501,38.148z"/>
    </clippath>
</svg>

...相对于其父级？

谢谢！

【问题讨论】：

标签： svg mask adobe-illustrator

【解决方案1】：

我认为您不能直接使用 Illustrator 来做到这一点。而且我不知道有任何工具可以进行转换。但是，在 AI 的帮助下手动完成是可能的。

我将首先在 100x100 的页面上设计您的剪切路径，并将这些坐标视为百分比。然后导出后。通过路径定义将所有坐标调整为小数点后两位。

以你的路径为例：

M .49401,.64
H .363
V .30648
h .11201
c .039, 0, .0715, .0025, .10501, .024
c .0495, .0315, .071, .0845, .071, .14151
C .65102, .5675, .59352, .64, .49401, .64
z
M .48501, .38148
h -.037
V .565
h .0365
c .057, 0, .0815 -.0365, .0815 -.09051
C .56602, .42148, .54252, .38148, .48501, .38148
z

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
 viewBox="0 0 100 100">
        <path d="M49.401,64H36.3V30.648h11.201c3.9,0,7.15,0.25,10.501,2.4c4.95,3.15,7.1,8.45,7.1,14.151
    C65.102,56.75,59.352,64,49.401,64z M48.501,38.148h-3.7V56.5h3.65c5.7,0,8.15-3.65,8.15-9.051
    C56.602,42.148,54.252,38.148,48.501,38.148z"/>

</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"
 viewBox="0 0 100 100">
    <clipPath id="clipping-mask" clipPathUnits="objectBoundingBox">
        <path d="M .49401,.64
                 H .363
                 V .30648
                 h .11201
                 c .039, 0, .0715, .0025, .10501, .024
                 c .0495, .0315, .071, .0845, .071, .14151
                 C .65102, .5675, .59352, .64, .49401, .64
                 z
                 M .48501, .38148
                 h -.037
                 V .565
                 h .0365
                 c .057, 0, .0815 -.0365, .0815 -.09051
                 C .56602, .42148, .54252, .38148, .48501, .38148
                 z"/>
    </clipPath>
     
     <rect width="100%" height="100%" fill="red" clip-path="url(#clipping-mask)"/>

</svg>

这有点乏味，我知道，但如果你有很多事情要做，你可以很容易地为它写一个脚本。

【讨论】：

【解决方案2】：

从 Paul LeBeau 的回答和https://graphicdesign.stackexchange.com/a/42666 的回答中得到启发，我发现您实际上可以将 Illustrator 中的画板设置为 1x1，并且在保存到 SVG 时增加保存时 SVG 选项中的小数位。这将产生一个已调整小数的 SVG。

【讨论】：

伟大的技巧@stevenwoodson - 从 Illustrator 导出 1x1 大小的图像并在高级 SVG 输出设置中增加小数点！省去了手动更改小数点和添加 0 的麻烦！
谢谢！整个下午我都在摸索着试图理解 clipPathUnits。显式步骤可能对假人有用（比如我） - 创建 Illustrator 画板，设置为 1 x 1px。绘制形状和文件 > 另存为 > SVG。我在 AI CC 中尝试了文件 > 导出，它将所有单位都转换为小数。保存为工作就像一个魅力！
这个其他 SO 答案帮助了我：stackoverflow.com/questions/31210466/… 但我不得不手动调整一下 transform="scale(0.0040, 0.0042)" 比率。