Как изменить размер clip-path SVG?

272

07 апреля 2018, 18:51

Я использую SVG в качестве маски для изображения, и пытаюсь изменить размер изображения.

Я изменил ширину и высоту (до 100), но изображение по-прежнему не масштабируется. Просто остается того же размера.

Codepen Demo

Здесь мой 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

Во-первых, когда вы устанавливаете атрибуты width и height на велечину 100, это делает svg высотой и широной 100px. Если вы хотите, чтобы svg имела полную ширину, вам нужно установить 100% для ширины.
Во-вторых, вам нужно указать значение атрибута viewbox, чтобы получить масштабирование и систему координат для элементов вашего svg.

Здесь пример для viewbox="0 0 500 500" и width="30%"

svg path { 
fill:#EDEBEA; 
} 
#img1 { 
height:500px; 
width:500px; 
clip-path:url(#svgPath); 
}

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

Теперь увеличим размер в два раза: <svg viewbox="0 0 500 500" width="60%" >

svg path { 
fill:#EDEBEA; 
} 
#img1 { 
height:500px; 
width:500px; 
clip-path:url(#svgPath); 
}

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

Источник: How to resize SVG clip-path? @web-tiki

Answer 2

Примеры анимации clip-path

Горизонтальное смещение

Для этого используем команду анимации смещения по горизонтали:
<animate attributeName="x" values="0;450;450;0;0" begin="click" dur="10s" restart="whenNotActive" />

values="0;450;450;0;0" перечисление позиций горизонтальной координаты "x"

Одинаковые цифры - 450;450 обеспечивают паузу нахождения в этой позиции

restart="whenNotActive защита от повторного запуска анимации

Запуск анимации - клик по фигуре

svg path { 
fill:#EDEBEA; 
} 
#img1 { 
height:500px; 
width:500px; 
clip-path:url(#svgPath); 
}

<svg viewbox="0 0 500 500" width="40%" > 
  <defs> 
    <clipPath id="svgPath"> 
      <path  d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> 
      <path  d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> 
      <path  d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> 
      <path  d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> 
    </clipPath> 
  </defs> 
  <image id="img1" xlink:href="https://i.stack.imgur.com/BOhFs.jpg" x="0" y="0" height="500" width="500"> 
   
  <animate attributeName="x" values="0;450;450;0;0" begin="click" dur="10s" restart="whenNotActive" /> 
  </image> 
</svg>

Вертикальное смещение

Для этого используем команду анимации смещения по вертикали:

<animate attributeName="y" values="0;450;450;0;0;-460;-460;0" begin="click" dur="10s" restart="whenNotActive" />

svg path { 
fill:#EDEBEA; 
} 
#img1 { 
height:500px; 
width:500px; 
clip-path:url(#svgPath); 
}

<svg viewbox="0 0 500 500" width="40%" > 
  <defs> 
    <clipPath id="svgPath"> 
      <path  d="M468.855,234.292H244.117V9.439L468.855,234.292z" /> 
      <path  d="M6.864,8.939h224.73v224.733L6.864,8.939z" /> 
      <path  d="M244.118,469.73V245.005h224.737L244.118,469.73z" /> 
      <path  d="M231.594,245.005V469.73H6.863L231.594,245.005z" /> 
    </clipPath> 
  </defs> 
  <image id="img1" xlink:href="http://i.stack.imgur.com/3DR2G.jpg" x="0" y="0" height="500" width="500"> 
   
  <animate attributeName="y" values="0;450;450;0;0;-460;-460;0" begin="click" dur="10s" restart="whenNotActive" /> 
  </image> 
</svg>