ClipPath 및 SVG 스케일링

Question

파란색 컨테이너 측면을 벗어나면 패턴을 클립하는 크기가 조정 된 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.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 (잘림)

,691 유일한 차이되면서 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> 

363,210

는 I 이미지 태그 클립 경로 = "URL (" #의 SvgjsClipPath1019 ")"를 추가한다는 것이다 두 번째 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>