Question

我对SVG的经验很少，我试图从插图画家中保存一条路径，以便它可以用作响应式剪贴蒙版，其大小相对于其父级，使用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>

......相对于其父母？

谢谢！

Answer 1

从Paul LeBeau的回答和https://graphicdesign.stackexchange.com/a/42666的答案中得到启示我发现你可以将Illustrator中的艺术板设置为1x1，当保存到SVG时，可以增加小数位。保存时的SVG选项。这将导致SVG的小数已经调整。

Answer 2

我认为你不能直接使用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>

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

为ObjectBoundingBox导出SVG

2 个答案: