响应式 SVG（调整大小后截断）

Question

我目前正在尝试实现一个 API，它使用 SVG 生成径向进度。

这是一个示例，说明当我将父级 div 的大小调整为更小时发生的情况。

任何人都可以提出一个解决方案来使 SVG 相对于父容器调整大小吗？

我尝试在 SVG 元素上使用 viewbox 属性，但结果不理想。

这是我的标记示例：

  text {
      text-anchor: middle;
      font-weight: bolder;
      font-family: 'Nunito', sans-serif;
  }
  .shadow {
      -webkit-filter: drop-shadow(6px 6px 10px #000000cc);
      filter: drop-shadow(6px 6px 10px #000000cc);
  }

<div id="svg-container" class="containter" style="width: 180px;height:280px">
    <svg id="svg" width="100%" height="100%" >
        <defs>
            <filter id="inset-drop-shadow">
                <feFlood flood-color="#000000" />
                <feComposite in2="SourceAlpha" operator="out" />
                <feGaussianBlur stdDeviation="6" result="blur" />
                <feComposite operator="atop" in2="SourceGraphic" />
            </filter>
        </defs>
        <circle cx="50%" cy="50%"  r="138" stroke="#ccc" stroke-width="1" fill="#999" />
        <circle cx="50%" cy="50%" r="135" stroke="#ccc" stroke-width="1" fill="#efefef" filter="url(#inset-drop-shadow)" />
        <circle cx="50%" cy="50%" r="105" stroke="#ccc" stroke-width="1" fill="#fff" class="shadow" />
    
        <text x="50%" y="40%" font-size="35" fill="#555">Value</text>
        <text x="50%" y="60%" font-size="45" fill="#555">100.0<tspan>%</tspan></text>
    
        <path x="50%" y="50%" id="arc1" fill="none" stroke="#0f0" stroke-width="27" filter="url(#inset-drop-shadow)" />
        <path x="50%" y="50%" id="arc2" fill="none" stroke="#999" stroke-width="10">
            <title>Target 80%</title>
        </path> 
    </svg>
</div>

Answer 1

视图框是这种情况下最简单的解决方案。否则，您必须将宽度和高度显式传递给 svg 并相应地计算所有坐标和尺寸

<div id="svg-container" class="containter" style="width: 180px;height:280px">
    <svg id="svg" width="100%" height="100%" viewBox="0 0 280 280">
        <defs>
            <filter id="inset-drop-shadow">
                <feFlood flood-color="#000000" />
                <feComposite in2="SourceAlpha" operator="out" />
                <feGaussianBlur stdDeviation="6" result="blur" />
                <feComposite operator="atop" in2="SourceGraphic" />
            </filter>
        </defs>
        <circle cx="50%" cy="50%"  r="138" stroke="#ccc" stroke-width="1" fill="#999" />
        <circle cx="50%" cy="50%" r="135" stroke="#ccc" stroke-width="1" fill="#efefef" filter="url(#inset-drop-shadow)" />
        <circle cx="50%" cy="50%" r="105" stroke="#ccc" stroke-width="1" fill="#fff" class="shadow" />
    
        <text x="50%" y="40%" font-size="35" fill="#555" text-anchor="middle">Value</text>
        <text x="50%" y="60%" font-size="45" fill="#555" text-anchor="middle">100.0<tspan>%</tspan></text>
    
        <path x="50%" y="50%" id="arc1" fill="none" stroke="#0f0" stroke-width="27" filter="url(#inset-drop-shadow)" />
        <path x="50%" y="50%" id="arc2" fill="none" stroke="#999" stroke-width="10">
            <title>Target 80%</title>
        </path> 
    </svg>
</div>

响应式 SVG（调整大小后截断）

Responsive SVG ( Truncation Following Resize )

svg

reactive

bootstrap-5