有没有办法在没有可见边缘的情况下从不透明度 0 开始 svg 圆形笔触填充？

2024-05-20 • 问答

我有一个带有渐变描边的 SVG 圆图。我的问题是我无法弄清楚如何从不透明度 0 开始使渐变不可见，并在最后使其不透明度为 1。我需要得到的是下面的图片。

到目前为止我有什么在我的代码段中

/*graf animacie*/
.circle-chart__circle {
  animation: circle-chart-fill 2s reverse; /* 1 */ 
  transform: rotate(-90deg); /* 2,3 */
  transform-origin: center; /* 4 */
}
.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1,-1); /* 1,2,3 */
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to { stroke-dasharray: 0 100; }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(1,1fr);
}

@media (min-width: 31em) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
}

<div style="margin: auto; display: contents; text-align: center;">
<section>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="150" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <circle class="circle-chart__background" stroke="white" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <circle class="circle-chart__circle circle-chart__circle--negative" stroke="url(#gradient)" stroke-width="2" stroke-dasharray="90,100" stroke-linecap="" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <g class="circle-chart__info">
        <text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">DEMO</text>
      </g>
        <defs>
           <linearGradient id="gradient" x1="1" y1="1" x2="0" y2="0">
       <stop offset="0.01" stop-color="#fdfafa"></stop>
        <stop  offset="0.20" style="stop-color:#e5b4b6"/>
        <stop  offset="0.80" style="stop-color:#c2545a"/>
       <stop offset="1" stop-color="#AE1515"></stop>
    </linearGradient>
   
        </defs>
    </svg>
  </section>
</div>

预先感谢您的帮助。

这里你需要的是“圆锥梯度”。不幸的是，SVG 本身不支持圆锥渐变。它们are supported in CSS，但您还不能将 CSS 渐变应用于 SVG 元素。

选项 1（不是真正的选项 :)

您可以对 HTML 元素应用圆锥渐变，然后使用 SVG 蒙版对其进行蒙版以产生最终效果。 不幸的是，使用 SVG 掩码来掩蔽 HTML 元素，目前仅适用于 Firefox。

演示（仅限 Firefox）

.chart-container {
  /* positioned parent is required in order for us to stack the children on top of each other */
  position: relative;
}

.chart-container .conic {
  width: 200px;
  height: 200px;
  background: conic-gradient(rgba(176,37,44,1) 34deg,rgba(176,0) 326deg);
  mask: url(#div-mask);
}

.chart-container svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.div-mask-path {
  stroke-dasharray: 100 100;
  animation: circle-chart-fill 2s forwards;
}

@keyframes circle-chart-fill {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

<div class="chart-container">
  <div class="conic"/>
  
  <svg viewBox="0 0 100 100">
    <mask id="div-mask" maskContentUnits="objectBoundingBox">
      <path class="div-mask-path"
            d="M 0.2706,0.1723
               A 0.40,0.40 0 0 0 0.5,0.90
               A 0.40,0.40 0 0 0 0.7294,0.1723"
              fill="none" stroke="white" stroke-width="0.12"
              pathLength="100"/>
    </mask>
  </svg>
</div>

选项 2

如果您知道页面背景颜色是什么。您可以使用与上述类似的技术，但不是屏蔽 HTML 元素，而是用一个带有孔的 SVG 元素覆盖它。

演示（应该适用于所有浏览器）

.chart-container {
  /* positioned parent is required in order for us to stack the children on top of each other */
  position: relative;
}

.chart-container .conic {
  width: 200px;
  height: 200px;
  background: conic-gradient(rgba(176,0) 326deg);
}

.chart-container svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.div-mask-path {
  stroke-dasharray: 2.025 2.025;
  animation: circle-chart-fill 2s forwards;
}

@keyframes circle-chart-fill {
  from { stroke-dashoffset: 2.025; }
  to { stroke-dashoffset: 0; }
}

<div class="chart-container">
  <div class="conic"/>
  
  <svg viewBox="0 0 100 100">
    <defs>
      <mask id="div-mask" maskContentUnits="objectBoundingBox">
        <!-- mask is mostly solid (white parts) -->
        <rect width="1" height="1" fill="white"/>
        <!-- but has a hole cut in it (black path) -->
        <path class="div-mask-path"
              d="M 0.2706,0.1723
                 A 0.40,0.90
                 A 0.40,0.1723"
                fill="none" stroke="black" stroke-width="0.12"/>
      </mask>
    </defs>

    <!-- use a white rectangle (matches page background)
         to cover the <div> with the conic gradient -->
    <rect width="100" height="100" fill="white" mask="url(#div-mask)"/>
  </svg>
</div>

选项 3

而不是使用带有圆锥渐变的 <div> 元素。创建一个bitmap image that contains the conic gradient；将其包含在 SVG 中；改为屏蔽该图像。

演示（应该适用于所有浏览器）

请注意，我在这里搞砸了，并在此处创建了纯白到红色的 PNG，而不是您想要的透明到红色的 PNG。这只是我的一个错误。我现在懒得重新创建它了。我会把它留给你:)

svg {
  width: 200px;
}

.div-mask-path {
  stroke-dasharray: 2.025 2.025;
  animation: circle-chart-fill 2s forwards;
}

@keyframes circle-chart-fill {
  from { stroke-dashoffset: 2.025; }
  to { stroke-dashoffset: 0; }
}

<svg viewBox="0 0 100 100">
  <defs>
    <mask id="div-mask" maskContentUnits="objectBoundingBox">
      <path class="div-mask-path"
            d="M 0.2706,0.1723"
              fill="none" stroke="white" stroke-width="0.12"/>
    </mask>
  </defs>

  <image xlink:href="https://i.imgur.com/cqhjI45.png"
         width="100" height="100"
         mask="url(#div-mask)"/>
</svg>

选项 4

通过在圆圈中对齐一系列 SVG 元素来创建渐变。从一个透明的开始，然后将颜色插入到终点。然后使用与选项 3 相同的技术屏蔽该组元素。这将起作用，但会导致更大的 SVG，因为您将添加多达 256 个额外元素来创建该渐变序列。

（此处不演示）

有没有办法在没有可见边缘的情况下从不透明度 0 开始 svg 圆形笔触填充？

pangy521 回答：有没有办法在没有可见边缘的情况下从不透明度 0 开始 svg 圆形笔触填充？

大家都在问