问html svg将图像切成两半
EN

Stack Overflow用户

提问于 2022-03-19 18:44:10

回答 1查看 143关注 0票数 1

我有一个图标在我的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" />

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-19 18:48:35

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71541042

复制

相似问题

问html svg将图像切成两半
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html svg将图像切成两半EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html svg将图像切成两半
EN