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, 627🔥, 0💬
Popular Posts:
How to add a hyperlink to connect a keyword to another slide in PowerPoint? I want to have clickable...
How to add or change the footer on a layout in PowerPoint? I want my slide footers to have the same ...
What is the port number used for the control connection in FileZilla Server? How to change control c...
How to convert slide files created with older versions of PowerPoint to the current PowerPoint? I ha...
Why am I getting the "You now have two copies of a file" error from OneDrive for Windows? You will g...