如何在 <object> 中显示 SVG 图像?以不同的比例标记? [英] How can I display an SVG image within an <object> tag at a different scale?
问题描述
如何在对象标签内以不同于原始比例的比例显示 SVG 图像?
How can I display an SVG image within an object tag at a different scale than its original scale?
例如，如果我有一个保存为 example.svg 的 SVG 文件:
For example, if I have an SVG file saved as example.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
我想以不同的比例在 page.html 中显示:
and I want to display this in page.html at a different scale:
<!DOCTYPE html>
<html>
<head></head>
<body>
<object type="image/svg+xml" data="/example.svg" width="50" height="50">
</object>
</body>
</html>
它应该显示缩小到 50x50 的 svg 版本，但它保持比例不变并提供图像滚动条.
It ought to display a version of the svg scaled down to 50x50, but instead it keeps the scale the same and gives the image scrollbars.
但是，如果我执行如下所示的内联 SVG，它会起作用:
However, if I do an inline SVG like the following, it works:
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="50"
height="50"
viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
</body>
</html>
我尝试了各种组合，例如将 width="100" 和 height="100" 添加到 .svg 文件中，使用 preserveAspectRatio="xMidYMid meet"，将px"添加到宽度和高度值，在 svg 中使用 width 和 height = "100%" 和其他东西，但它们都不起作用.
I have tried various combinations of this, such as adding width="100" and height="100" into the .svg file, using preserveAspectRatio="xMidYMid meet", adding 'px' to the width and height values, using width and height = "100%" in the svg, and other things, but none of them have worked.
在我的情况下，我可以只包含 svg 内联，但我觉得改变图像的比例应该不难.另外我希望浏览器能够缓存图像.
In my situation I can just include the svg inline, but I don't feel like it should be that hard to change the scale of the image. Plus I want the browser to be able to cache the image.
推荐答案
您需要将 svg 元素的宽度和高度属性设置为 100%.然后它将被缩放到容器(对象元素)的大小.否则，它只会以指定的确切大小(100 像素)显示.
You need to set the width and height attributes of your svg element to 100%. It will then be scaled to the size of the container (the object element). Without that, it will just be displayed at the exact size specified (100 pixels).
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 100 100"
width="100%" height="100%">
<circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
这篇关于如何在 <object> 中显示 SVG 图像?以不同的比例标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
