How to resize SVG clip-path?

问题

I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains the same size.

Codepen Demo

This is the 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>

回答1:

Firts, when you set the width and height attributes to 100, it makes the svg 100px high and wide. If you want the svg to be full width, you need to give it 100% width.

Second, as commented by @Paulie_D you need to give a value to the viewbox attribute to provide a scale and coordinate system for the elements in your svg. Here is an example with viewbox="0 0 500 500" and 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>

Output :

来源：https://stackoverflow.com/questions/34064917/how-to-resize-svg-clip-path

标签

css

css3

svg

clip-path