英文:
How do you scale an immutable SVG?
问题
如果我有一个类似这样的常规SVG元素，但它是不可变的，也就是说你不能克隆，或更改任何参数，比如高度和宽度。有没有办法对其进行缩放？
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" height="42" width="350">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" xml:space="preserve" x="30" y="0" width="80" height="65" viewBox="-200 400 1600 900">
<metadata>
...
</metadata>
<g>
...
</g>
</svg>
</svg>
英文:
If I have a regular SVG element like this, but it is immutable as in you cannot clone, or change any parameters such as height and width. Is there any way to scale it?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" height="42" width="350">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" xml:space="preserve" x="30" y="0" width="80" height="65" viewBox="-200 400 1600 900">
<metadata>
...
</metadata>
<g>
...
</g>
</svg>
</svg>
答案1
得分: 1
如果您有这样的SVG：
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
您可以将其包装在另一个SVG元素中，其中viewBox匹配原始SVG的大小。现在，您可以指定大小（宽度和/或高度）或将其留空以使其填充可用空间。
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 50 50">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
</svg>
您也可以将SVG作为外部资源（例如数据URI）进行相同操作，其中图像元素的宽度和高度属性与父SVG元素的viewBox匹配。
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
<image width="100" height="100" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiBmaWxsPSJvcmFuZ2UiLz4KPC9zdmc+" />
</svg>
不要在代码部分进行翻译。
英文:
If you have an SVG like this:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
<!-- end snippet -->
You can wrap it in another SVG element where the viewBox matches the size of the original SVG. Now, you can specify a size (width and/or height) or leave it out to make it fill the available space.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 50 50">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="orange"/>
</svg>
</svg>
<!-- end snippet -->
You can do the same with the SVG as an external resource (here a data URI for the example) where the width and the height attributes of the image element matches the viewBox of the parent SVG element.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 100 100">
<image width="100" height="100" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjUwIiBmaWxsPSJvcmFuZ2UiLz4KPC9zdmc+" />
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论