Categories:
Cloud (204)
Entertainment (11)
Facebook (43)
General (50)
Life (31)
Programming (64)
Technology (398)
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, 220👍, 0💬
Popular Posts:
What is this Website about? This Website provides a collection of Frequently Asked Questions (FAQ) a...
How to troubleshoot Fitbit device sync issue? My Fitbit device is connected to my Windows computer, ...
How to use my iPhone and iPad to set up and manage Chromecast device on my TV? I have a Chromecast d...
What is "Send to Bluetooth" in Microsoft Word? Should I disable it? "Send to Bluetooth" is a COM Add...
How to create two columns in Microsoft Word documents? If you want to make a part of a Word document...