如何使用< object>标签以显示宽度和高度百分比的SVG
我最初有一组PNG,然后可以使用< img>
显示,并添加CSS width
属性设置为60%
。这允许该页面响应迅速并在所有显示上正确显示。
我现在想将这些PNG升级到SVG,以具有更好的质量。问题在于,在SVG中,我理想地需要使用其他外部SVG来确保SVG不大。在< img>
元素中
- ,如果我将
src
设置为SVG,则无法获取外部资源。 - 因此,相反,我尝试使用
< obejct>
标签,该标签允许SVG使用外部资源。但是现在,当我添加CSSwidth
属性时,它无能为力。
是否可以在< object>
标签上具有百分比宽度,或使用允许外部资源的其他标签。
无效图像的一个示例是: https://gitlab.com/frodobot/website/website/-/blob/dnh/new_command_pictures/public/public/public/static/img/commands/commands/commandimagebase.svgg#l59 单击源查看SVG代码)
I originally had a set of PNGs which I could then display with the <img>
and add a css width
property set to 60%
. This allows the page to be responsive and correctly display on all displays.
I am now wanting to upgrade these PNGs to SVGs to have better quality. The problem is that within the SVGs, I ideally need to use other external SVGs to make sure the SVG isn't to big. In the <img>
element
- if I set the
src
to the SVG, external resources can't be fetched. - So instead, I've tried to use the
<obejct>
tag which allows the SVGs to use external resources. But now when I add csswidth
property, it doesn't do anything.
Is it possible to have percentage widths on the <object>
tag or use a different tag that allows for external resources.
An example of an image that doesn't work is: https://gitlab.com/frodobot/website/-/blob/dnh/new_command_pictures/public/static/img/commands/commandImageBase.svg#L59 (you might have to click on source to see the SVG code)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
img
和对象
以完全相同的方式工作。对于两者都可以使用外部媒体,必须正确链接。您可以使用CSS设置大小。img
andobject
works exactly the same way. For both it's possible to use external media, it just must be linked correctly. You can set the size with CSS.