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:
Define SVG Viewbox-Viewport Mapping
How to define the SVG Viewbox-Viewport Mapping?
✍: FYIcenter.com
The Viewbox-Viewport Mapping can be defined with attributes of the "svg" element:
1. Use <svg viewBox="{view_min_x} {port_min_y} {view_width} {view_height}" .../> attribute to set the Viewbox area which runs from ({view_min_x}, {view_min_y}) to ({view_min_x}+{view_width}, {view_min_y}+{view_height}). For example the following "svg" element sets the Viewbox area in the Object Coordinate System at (0,-100) with a size of (75,100):
<svg viewBox="0 -100 75 100" ...> ... </svg>
2. Use <svg width="{port_width}" height="{port_height}" .../> attributes to set the Viewport area which runs from (0,0) to ({port_width}, {port_height}). For example the following "svg" element sets the Viewport area in the Canvas Coordinate System at (0,0) with a size of (300,200):
<svg width="300" height="200" ...> ... </svg>
3. Use <svg preserveAspectRatio="{keyword}" .../> attribute to flag whether or not the Viewbox-Viewport mapping should respect the aspect ratio. For example the following "svg" element says that the aspect ratio is not respected:
<svg preserveAspectRatio="none" ...> ... </svg>
Here is a HTML document, viewbox.html, that has a SVG image with the Viewbox-Viewport mapping specified as "svg" attributes:
<html><body> <div style="width: 400px; height: 300px; background-color: lightgrey;"> <svg xmlns="http://www.w3.org/2000/svg" style="background-color: #ffffff" width="300" height="200" viewBox="0 -100 75 100" preserveAspectRatio="none"> <ellipse cx="0" cy="0" rx="75" ry="100" stroke="blue" stroke-width="20" fill="none"/> </svg> </div> </body></html>
When you open the above HTML file, viewbox.html, in a Web browser, you see a portion of the ellipse object inside the Viewbox being mapped to the Viewport:
Note that the grey area represents the HTML "div" tag area, where the SVG canvas is displayed and aligned to the top left corner.
⇒ What Is the Default SVG Viewbox
⇐ What Is SVG Viewbox-Viewport Mapping
2023-08-17, 288🔥, 0💬
Popular Posts:
Why I am getting the "run or save ChromeSetup.exe" pop up box when trying to install Google Chrome 3...
What is Microsoft Teams? Microsoft Teams is a Microsoft cloud service that combines workplace chat, ...
Where to find answers to frequently asked questions on Google Chrome? I want to know how to install ...
Why I am getting the "Opening ChromeSetup.exe" dialog box when trying to install Google Chrome 31 on...
How to troubleshoot Fitbit device sync issue? My Fitbit device is connected to my Windows computer, ...