Question

在所提供的实例中,较小的形状的渗透速度比较大的形状要快得多,因为它的中风长度要小得多。

我的理解是,将<代码>stroke-dasharray<>/code>设定为100%而不是六氯苯,应当达到这一目的,但是,如果中风确实使形状的百分之百全部延伸,就会产生意外结果。

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  animation: draw 5s infinite linear;
}

@keyframes draw {
  from {
    stroke-dashoffset: 2000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975"></polygon>
</svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <polygon class="shape" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12"></polygon>
</svg>
  </div>
</div>

Answer 1

您可以通过设立https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength” rel=“nofollow noreferer”pathLength来规避这一问题。实现 path升道路长度的正常化

From mdn docs

the pathLength attribute lets authors specify a total length for the path, in user units. This value is then used to calibrate the browser s distance calculations with those of the author, by scaling all distance computations using the ratio pathLength / (computed value of path length).

这样,你就可以确保两种估算都同时进行,也便于对现金记录财产进行计算,因为你只是需要在两者之间进行清醒。

stroke-dasharray: 0 100 (no visible stroke)
and
stroke-dasharray: 100 100 (full path length)

.page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.radar-wrapper {
  width: 300px;
  height: 300px;
}

.shape {
  fill: #ff4040;
  fill-opacity: .4;
  stroke: #ff4040;
  stroke-width: 2;
  stroke-dasharray: 0 100;
  animation: draw 2s infinite linear;
}

@keyframes draw {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 100 100;
  }
}

<div class="page-wrapper">
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <polygon class="shape" pathLength="100" points="116.67 3.97 155.96 123.88 243.39 32.89 174.14 138.38 299.79 150 174.14 161.62 243.39 267.11 155.96 176.12 116.67 296.03 133.3 170.95 15.05 214.99 123.21 150 15.05 85.01 133.3 129.05 116.67 3.975" />
    </svg>
  </div>
  <div class="radar-wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <polygon class="shape" pathLength="100" points="144.04 176.12 133.3 170.95 125.86 161.62 123.21 150 125.86 138.38 133.3 129.05 144.04 123.88 155.96 123.88 166.7 129.05 174.14 138.38 176.79 150 174.14 161.62 166.7 170.95 155.96 176.12 144.04 176.12" />
    </svg>
  </div>
</div>

友情链接