SVG 修复填充大小

Question

我的 svg 文件有问题。 我已将 svg 文件放入 img 中的 src

SVG loader.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" fill="none" stroke="#000" stroke-width="4" r="17" stroke-dasharray="80.11061266653974 28.703537555513243" transform="rotate(46.7215 50 50)">
  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
</circle>
</svg>

html中的img

<img src="loader.svg" />

loader img 这个加载器有宽度：200px 和高度：200px 和圈内宽度：100px 和高度：100px。 不幸的是，当我改变内部 img 圆圈的大小时，也会改变大小，因为整个 svg 大小都发生了变化。

我想得到结果： 要修复 svg 内的永久大小圆圈 - 它可以更改背景的大小，但圆圈内的大小应始终为 100x100px。

是否可以在 svg 中修复此大小？

Answer 1

因为您的 viewBox 始终是 100x100 网格（不是像素！），
如果您以另一个比例显示 SVG 它会拉伸 SVG 矢量

要保持 50 个 PIXEL RADIUS 圆形，您必须动态更改圆形 SVG。

有经验的 SVGer 会通过使用 MATRIX 变换圆的比例来做到这一点

更容易为你的圈子计算 3 个参数：

半径，还有 STROKEWIDTH（在每个实例中保持相同的宽度）和 GAP（圆周的 25%）

（并以百分比为圆心！）

<circle cx="50%" cy="50%" stroke-width="STROKEWIDTH" r="RADIUS" stroke-dasharray="GAP">

最容易将 JavaScript 包装在现代 W3C 标准自定义元素中，因此您可以使用语义 HTML：

<svg-loader width=6 color=red id=loader_1></svg-loader>
<svg-loader width=6 color=blue id=loader_2></svg-loader>
<svg-loader width=6 color=green id=loader_3></svg-loader>

<template id="SVG-LOADER">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" fill="none" stroke="COLOR" stroke-width="STROKEWIDTH" r="RADIUS" stroke-dasharray="GAP" transform="rotate(0 50 50)">
      <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
    </circle>
  </svg>
</template>
<script>
  customElements.define('svg-loader', class extends HTMLElement {
    connectedCallback() {
      let svgTemplate = document.getElementById(this.nodeName).innerHTML;
      this.hostIMG = this.appendChild(document.createElement("IMG"));
      let { width } = getComputedStyle(this.hostIMG);
      width = Number(width.replace(/px/, ''));
      if (width === 0) width = 100;
      let strokewidth = Number(this.getAttribute("width"));
      let radius = (100 / width * (50 - (strokewidth / 2)));
      let gap = 2 * 3.14 * radius * 3 / 4; //25% gap
      strokewidth = (100 / width * strokewidth)
      this.hostIMG.src = `data:image/svg+xml,` +
        svgTemplate.replace(/"/g, "'").replace(/#/g, "%23")
        .replace(/RADIUS/g, radius).replace(/STROKEWIDTH/g, strokewidth)
        .replace(/GAP/g, gap).replace(/COLOR/g, this.getAttribute("color"));
    }
  });
</script>
<style>
  svg-loader img {    background: lightblue;  }
  #loader_1 img {    width: 100px;  }
  #loader_2 img {    width: 175px;  }
  #loader_3 img {    width: 80px;  }
</style>
<svg-loader width=6 color=red id=loader_1></svg-loader>
<svg-loader width=6 color=blue id=loader_2></svg-loader>
<svg-loader width=6 color=green id=loader_3></svg-loader>