html svg 将图像切成两半答案

【问题标题】：html svg cuts image in halfhtml svg 将图像切成两半
【发布时间】：2023-02-17 05:04:43
【问题描述】：

我的 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" />

【问题讨论】：

将 png 放在 svg 中有什么意义？

标签： html css

【解决方案1】：

您可以将 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" />

【讨论】：

您的 viewbox 属性被忽略，因为它区分大小写。它必须是大写的B。