如何调整SVG剪切路径的大小? [英] How to resize SVG clip-path?

问题描述

我正在使用SVG作为图像的遮罩，并且正在尝试调整其大小.我试过指出宽度&高度(至100)，但仍无法缩放.只是保持不变的大小.

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演示

这是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>

推荐答案

首先，将width和height属性设置为100时，svg的高度和宽度将变为100px.如果您希望svg为全宽，则需要为其提供100％的宽度.

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.

第二，如@Paulie_D所评论，您需要为 viewbox属性，为svg中的元素提供比例和坐标系.这是viewbox="0 0 500 500"和width="30%" :

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>

输出:

这篇关于如何调整SVG剪切路径的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！