ClipPath und SVG-Skalierung

Question

Ich versuche, ein skaliertes Svg-Bild zu erhalten, um das Muster abzuschneiden, wenn es außerhalb des blauen Containers verschwindet. Aber wenn ich den Clip-Pfad auf das Muster für genau die gleiche Position anwenden. Die X- und Y-Position des Musters ändert sich und es endet in dem unten gezeigten Fall außerhalb des Containers für genau dieselben Positionen und Transformationen, die angewendet wurden. Ich habe auch einen FeMorphology-Filter angewendet, um anzuzeigen, wo der geclippte Pfad gezeichnet wird.

SVG (Non eingeclipst)

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 (Befestigte)

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> 

Mit dem einzigen Wesen Unterschied ist, dass ich Clip-path = "url (" # SvgjsClipPath1019 ")", um den Image-Tag hinzugefügt der zweiten svg

Answer 1

Der Fehler liegt in der oder in denen die Attribute transform und clip-path angewendet werden. transform ist immer die letzte Operation, und clip-path wird auf das nicht transformierte Element angewendet.

Dieser Ausschnitt

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

entspricht

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

während Sie dies erreichen wollten:

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