Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (430)
Testing (4)
Tools (488)
Twitter (5)
Wearable (26)
Web Design (44)
Collections:
Other Resources:
SVG "preserveAspectRatio" Attribute
How to use SVG "preserveAspectRatio" attribute to control aspect ratio?
✍: FYIcenter.com
If you want to control the aspect ratio in the Viewbox-Viewport mapping,
you set the SVG "preserveAspectRatio" attribute to different values:
Here is an HTML document, preserve-aspect-ratio.html, that has 3 SVG images with different settings for the "preserveAspectRatio" attribute:
<html><body> <div style="width: 750px; height: 250px; background-color: lightgrey;"> <svg style="background-color: #ffffff" width="200px" height="200px" viewBox="0 150 400 100" preserveAspectRatio="xMidYMid meet"> <rect x="0" y="150" width="400" height="100" stroke="red" stroke-width="1" fill="none"/> <text x="170" y="170" fill="red">Viewbox</text> <circle cx="200" cy="200" r="200" stroke="black" stroke-width="10" fill="none"/> <text x="100" y="270" font-size="80" stroke="black">Object</text> </svg> <svg style="background-color: #ffffff" width="200px" height="200px" viewBox="0 150 400 100" preserveAspectRatio="xMidYMid slice"> <rect x="0" y="150" width="400" height="100" stroke="red" stroke-width="1" fill="none"/> <text x="170" y="170" fill="red">Viewbox</text> <circle cx="200" cy="200" r="200" stroke="black" stroke-width="10" fill="none"/> <text x="100" y="270" font-size="80" stroke="black">Object</text> </svg> <svg style="background-color: #ffffff" width="200px" height="200px" viewBox="0 150 400 100" preserveAspectRatio="none"> <rect x="0" y="150" width="400" height="100" stroke="red" stroke-width="1" fill="none"/> <text x="170" y="170" fill="red">Viewbox</text> <circle cx="200" cy="200" r="200" stroke="black" stroke-width="10" fill="none"/> <text x="100" y="270" font-size="80" stroke="black">Object</text> </svg> </div> </body></html>
When you open the above HTML file, preserve-aspect-ratio.html, in a Web browser, you see 3 SVG images rendered with 3 different settings for the "preserveAspectRatio" attribute.
As you can see, the impact of the "preserveAspectRatio" attribute can be summariezed as:
⇒ What Are Nested SVG Canvases
⇐ Default SVG Viewport in HTML "P" Tag
2023-02-03, 1006🔥, 0💬
Popular Posts:
How can I create a Personal Folders File (.pst) to store messages, contacts and other types of Outlo...
Where to find answers to frequently asked questions on Microsoft Teams? Here is a list of frequently...
How to add a new layout to the slide master in PowerPoint? In my PowerPoint presentation, I need to ...
What is "OneNote Linked Notes Add-in" in Microsoft Word? Should I disable it? "OneNote Linked Notes ...
Where to find answers to frequently asked questions on FTP (File Transfer Protocol and related tools...