How to resize SVG clip

2018-06-10 09:32:02

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>

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>

链接地址: http://www.djcxy.com/p/30776.html

上一篇: Patsy：测试数据中分类字段的新级别

下一篇: 如何调整SVG剪辑的大小