Default SVG Viewport in HTML "P" Tag
What Is the Default SVG Viewport in an HTML <p> element?
✍: FYIcenter.com
If you have a SVG image with the default Viewport
and include it in an HTML <p> element,
the width of the Viewport will be set the width of the parent element
of the <p> element.
This is because <p> an inline element which inherits its parent's width.
Here is a HTML document, viewport-default-2.html, that has a SVG image with the default Viewport included in a HTML "p" element:
<html><body>
<p>Enclosed in a "p" element:</p>
<svg xmlns="http://www.w3.org/2000/svg"
style="background-color: #ffffff"
viewBox="0 -100 75 100"
preserveAspectRatio="none">
<ellipse cx="0" cy="0" rx="75" ry="100"
stroke="blue" stroke-width="20" fill="none"/>
</svg>
Continue after "p".</p>
</body></html>
When you open the above HTML file, viewport-default-2.html, in a Web browser, you see a portion of the ellipse object inside the Viewbox being mapped to a Viewport cross the entire width of the Web page.
⇒ SVG "preserveAspectRatio" Attribute
⇐ What Is the Default SVG Viewport
2023-02-03, 284🔥, 0💬
Related Topics:
