ClipPath 和 SVG 缩放答案

【问题标题】：ClipPath and SVG ScalingClipPath 和 SVG 缩放
【发布时间】：2018-06-04 06:24:35
【问题描述】：

如果图案超出蓝色容器，我正在尝试获取缩放的 svg 图像来剪辑图案。但是当我将剪辑路径应用于完全相同位置的图案时。图案的 X 和 Y 位置发生变化，并在下图所示的情况下结束于容器之外，应用完全相同的位置和变换。我还应用了 feMorphology 过滤器来显示剪切路径的绘制位置。

SVG（未剪辑）

XML

<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
    <defs id="SvgjsDefs1007">
        <clipPath id="SvgjsClipPath1019">
            <rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
        </clipPath>
        <filter id="dilate_shape">
            <feMorphology operator="dilate" in="SourceGraphic" radius="5" />
        </filter>
    </defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
        <g >
            <g filter="url(&quot;#dilate_shape&quot;)">
                <rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url(&quot;#SvgjsClipPath1019&quot;)"></rect>
            </g>
            <image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&amp;raw=1&amp;size=1280x960&amp;size_mode=3&amp;w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)"  x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150"  ></image>
        </g>
    </svg>

SVG（剪辑）

XML

<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
    <defs id="SvgjsDefs1007">
        <clipPath id="SvgjsClipPath1019">
            <rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
        </clipPath>
        <filter id="dilate_shape">
            <feMorphology operator="dilate" in="SourceGraphic" radius="5" />
        </filter>
    </defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
        <g >
            <g filter="url(&quot;#dilate_shape&quot;)">
                <rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url(&quot;#SvgjsClipPath1019&quot;)"></rect>
            </g>
            <image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&amp;raw=1&amp;size=1280x960&amp;size_mode=3&amp;w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)"  x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150"  clip-path="url(&quot;#SvgjsClipPath1019&quot;)"></image>
        </g>
   </svg>

唯一的区别是我将 clip-path="url("#SvgjsClipPath1019")" 添加到第二个 svg 的图像标签中

【问题讨论】：

标签： javascript svg

【解决方案1】：

错误在于transform 和clip-path 属性的应用顺序。 transform 始终是最后一个操作，clip-path 应用于未转换的元素。

这个sn-p

<image xlink:href="..." x="-75" y="-75"
       transform="translate(278.34 410.34) scale(1.66 1.66)"
       clip-path="url(#SvgjsClipPath1019)" />

等价于

<g transform="translate(278.34 410.34) scale(1.66 1.66)">
    <image xlink:href="..." x="-75" y="-75"
           clip-path="url(#SvgjsClipPath1019)" />
</g>

当你想达到这个目的时：

<g clip-path="url(#SvgjsClipPath1019)">
    <image xlink:href="..." x="-75" y="-75"
       transform="translate(278.34 410.34) scale(1.66 1.66)"> />
</g>

【讨论】：