主页 / 问题 / 1161379
Accepted
Leks
Asked:2020-08-03 02:28:10 +0000 UTC2020-08-03 02:28:10 +0000 UTC

圆形动画不适用于stroke-dashoffset？

  • 772

为什么遮罩动画不能与 stroke-dashoffset 一起使用？

<svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg">
<mask id='mask'>
<circle r="30" cx="50" cy="50" stroke='black' fill="black" stroke-width='50' stroke-dashoffset='20 20'>
<animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='10s'
repeatCount='indefinite'
values='50'
/>
</circle>
<rect width="100%" height="100%" fill="green" />
</mask>
<circle r="30" cx="50" cy="50" fill="orange" />

<rect width="100" height="100" fill='tomato' mask='url(#mask)' />
</svg>

html

1 个回答

  1. Best Answer

    在 svg 中，最好总是添加viewBox，如果不指定widthand height，那么图像将占据整个浏览器屏幕。如果您需要适应性，请以相对单位指定宽度和高度。

    <svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" 
  width="35vw" height="35vh" viewBox="0 0 100 100">

    要使用帮助动画绘制圆形边框stroke-dashoffset，您需要知道圆形的总长度。

    有了半径r="30"，它 2 * 30 * 3.14 = 188.4
    也stroke-dasharray ="188.4"等于stroke-dashoffset

    下面是一个不带面具的示例动画，以更好地理解原理。
    stroke-dashoffset从最大值 (188.4) 变化到零，从而确保边框从零绘制到一个完整的圆。

    点击后的动画

    <svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" width="35vw" height="35vh" viewBox="0 0 100 100">

<rect width="100%" height="100%" fill="green" />
<circle id="crc1" r="30" cx="50" cy="50" stroke='black' fill="none" stroke-width='40' stroke-dasharray="188.4" stroke-dashoffset='188.4'>
  <animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='5s'
repeatCount='indefinite'
values='188.4;0'
/> 
</circle>

    现在从您的示例中添加圆形动画蒙版

    <mask id='mask'>
<rect width="100%" height="100%" fill="green" />
<circle r="30" cx="50" cy="50" stroke='black' fill="black"

    将蒙版元素着色为黑色会导致它切出一个洞

    请参阅代码中的注释，以便更容易理解要点。

    <svg id='h' version="1.1" xmlns="http://www.w3.org/2000/svg" width="25vw" height="25vh" viewBox="0 0 100 100">
<mask id='mask'>
<!-- Заполнение в маске цветом (зелёным) это цвет между черным и белым, делает изображение полупрозрачным -->
<rect width="100%" height="100%" fill="green" />

<!-- Заполнение чёрным цветом вырезает отверстие -->
<circle id="crc1" r="30" cx="50" cy="50" stroke='black' fill="black" stroke-width='40' stroke-dasharray="188.4" stroke-dashoffset='188.4'>
  <animate
attributeName='stroke-dashoffset'
begin='h.click'
dur='5s'
repeatCount='indefinite'
values='188.4;0'
/> 
</circle>
</mask>
 <circle r="30" cx="50" cy="50" fill="orange" />  

  <!-- Маска вырезает из прямоугольника широкую строку --> 
  <!-- pointer-events="none" для того, чтобы клик проходил сквозь прямоугольник -->
  <!-- до circle с id="crc1" для запуска анимации маски -->
 <rect width="100" height="100" fill='tomato' mask='url(#mask)' pointer-events="none" />  
</svg>

    • 4

相关问题