Wie ändere ich den SVG Clip-Pfad?

Question

Ich benutze ein SVG als Maske für ein Bild und ich versuche es zu skalieren. Ich habe versucht, die Breite & Höhe (bis 100) anzuzeigen, aber es skaliert immer noch nicht. Bleibt einfach gleich groß.

Codepen Demo

Dies ist der SVG-Code:

<svg height="100" width="100"> 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> 
 
     <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> 
 
     <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> 
 
     <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg>

Answer 1

Firts, wenn Sie die Höhe und Breite auf 100 gesetzt, den svg 100px hoch und breit macht. Wenn Sie möchten, dass der Svg die volle Breite hat, müssen Sie ihm 100% Breite geben.

Zweitens, wie von @Paulie_D kommentiert, müssen Sie der viewbox attribute einen Wert geben, um eine Skala und ein Koordinatensystem für die Elemente in Ihrer Svg bereitzustellen. Hier ist ein Beispiel mit viewbox="0 0 500 500" und width="30%" :

<svg viewbox="0 0 500 500" width="30%" > 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <path fill="#EDEBEA" d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> 
 
     <path fill="#EDEBEA" d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> 
 
     <path fill="#EDEBEA" d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> 
 
     <path fill="#EDEBEA" d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> 
 
    </clipPath> 
 
    </defs> 
 
    <image xlink:href="http://i.stack.imgur.com/3DR2G.jpg" x="0" y="0" height="500" width="500" style="clip-path: url(#svgPath);"/> 
 
</svg>

Ausgang: