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:
What Are SVG Coordinate Systems
What Are SVG Coordinate Systems?
✍: FYIcenter.com
There are two coordinate systems involved when rendering a graphical object on the SVG canvas:
1. The Canvas Coordinate System - It is a 2-dimensional space used in a "svg" element to define the size of the drawing canvas where all child graphical objects will be rendered.
For example, the following "svg" element defines the drawing canvas with a size of (300, 200) pixels. The background of the canvas will be filled in white color.
<svg xmlns="http://www.w3.org/2000/svg" style="background-color: #ffffff" width="300" height="200"> ... </svg>
2. The Object Coordinate System - It is also a 2-dimensional space used in a graphical object element like "line", "rect", "circle", etc. to define the shape of the object.
For example, the following "ellipse" element defines an ellipse object in the Object Coordinate System with the center point at (0,0), the short radius of 75, the long radius of 100.
<ellipse cx="0" cy="0" rx="75" ry="100" stroke="blue" stroke-width="20" fill="none"/>
⇒ What Is SVG Viewbox-Viewport Mapping
⇐ SVG Coordinates, Size and Viewport
2023-08-17, 276🔥, 0💬
Popular Posts:
How to use my iPhone and iPad to set up and manage Chromecast device on my TV? I have a Chromecast d...
Why I getting the "Error! No text of specified style in document." in Microsoft Word? You are gettin...
How to view dynamic field codes in Microsoft Word? Each dynamic value is Microsoft Word is driven by...
What is this Website about? This Website provides a collection of Frequently Asked Questions (FAQ) a...
How to test I/O performance on INTEL SSDPEKKF256G8L SSD (Solid State Disk) with SQLIO? INTEL SSDPEKK...