Jak zmienić rozmiar klipu SVG?

Question

Używam SVG jako maski dla obrazu i próbuję zmienić jego rozmiar. Próbowałem wskazać szerokość (100), ale nadal nie skaluje. Pozostaje ten sam rozmiar.

Codepen Demo

Jest to kod SVG:

<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

Kokietuje, kiedy ustawić szerokość i wysokość atrybutów do 100, to sprawia, że ​​SVG 100px wysokości i szerokości. Jeśli chcesz, aby svg miał pełną szerokość, musisz nadać mu szerokość 100%.

Po drugie, jak skomentował @Paulie_D, musisz podać wartość viewbox attribute, aby podać skalę i układ współrzędnych dla elementów w twoim SVG. Oto przykład z viewbox="0 0 500 500" i 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>

wyjściowa: