html svg 将图像切成两半

Question

I have an Icon inside my SVG but it cuts off at the top how can I display it fully inside the SVG?我的 SVG 中有一个图标，但它在顶部被截断了，我如何才能在 SVG 中完全显示它？

 <svg width="400" height="50" data-value="40"> <path class="bg" stroke="#ccc" d="M0 10, 400 10" ></path> <path class="meter" stroke="#0301fb" d="M0 10, 400 10" style="stroke-dasharray: 400; stroke-dashoffset: 400;"> </path> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" /> </svg> Original <img id="loadIcon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />

Answer 1

You can set viewbox attribute to svg elements.您可以将viewbox属性设置为 svg 个元素。

 <svg width="400" height="50" viewbox = "150 -15 100 60" data-value="40"> <path class="bg" stroke="#ccc" d="M0 10, 400 10" ></path> <path class="meter" stroke="#0301fb" d="M0 10, 400 10" style="stroke-dasharray: 400; stroke-dashoffset: 400;"> </path> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" /> </svg> Original <img id="loadIcon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Circle-icons-hourglass.svg/512px-Circle-icons-hourglass.svg.png" height="64" width="50" x="1%" y="-20" />

html svg 将图像切成两半

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-03-19 18:48:35

html svg 将图像切成两半

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-03-19 18:48:35

解决方案1
1 已采纳 2022-03-19 18:48:35