html - 在圆图中添加图像

Question

我已经为我的技能制作了圆图，但我想在图表中添加图像。
但不使用任何 Javascript 代码。
我从这里得到它:https://codepen.io/maoberlehner/pen/jwVWQz?editors=1100

.circle-chart__circle {
    animation: circle-chart-fill 3s reverse; /* 1 */ 
    transform: rotate(-90deg); /* 2, 3 */
    transform-origin: center; /* 4 */
    background: red;
  }
  .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);
    }
  }
  @media (min-width: 31em) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

<div class="col-sm-6">
    <h2>Python 3</h2>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
            <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__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
    </svg>
</div>

Answer 1

在svg中显示图片, 使用标签 <image>结合标签 <pattern> ，定义为 id .接下来，安装规则 fill="url(#img)"与 id , 其中有一个带有 image 的标签。

<defs>
   <pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
      <image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
   </pattern>
</defs>

同时删除 fill="none"从第一个<circle>阴影。这将阻止显示图像。

.circle-chart__circle {
    animation: circle-chart-fill 3s reverse; /* 1 */ 
    transform: rotate(-90deg); /* 2, 3 */
    transform-origin: center; /* 4 */
    background: red;
  }
  .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);
    }
  }
  @media (min-width: 31em) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
  }

<div class="col-sm-6">
   <h2>Python 3</h2>
   <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200">
      <defs>
         <pattern id="img" patternUnits="userSpaceOnUse" height="100" width="100">
            <image x="0" y="0" height="100%" width="100%" xlink:href="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg"></image>
         </pattern>
      </defs>
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" cx="16.91549431" cy="16.91549431" r="15.91549431" fill="url(#img)"/>
      <circle class="circle-chart__circle" stroke="#1990bf" stroke-width="2" stroke-dasharray="85,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
   </svg>
</div>