ClipPathとSVGのスケーリング

Question

青いコンテナの外に出ると、パターンをクリップするために拡大縮小されたsvgイメージを取得しようとしています。しかし、私は正確に同じ位置のパターンにクリップパスを適用します。パターンのXとYの位置が変化し、まったく同じ位置と変形が適用された場合、以下に示すケースではコンテナの外側になります。私はまた、フェーモードフィルタを適用して、クリップされたパスがどこに描画されているかを示しました。

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.com/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.com/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> 

唯一の違いはあると私はイメージタグにクリップパス= "URL（"＃1 SvgjsClipPath1019 "）" を追加することです第2のsvgの

Answer 1

エラーは、またはder transformとclip-pathの属性が適用されています。 transformは常に最後の操作であり、変換されていない要素にはclip-pathが適用されます。

このスニペット

<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>