Scaling Issues
Có thể bạn quan tâm
Natural scaling
Another strategy is needed in order to scale the figure to make the text within the SVG consistent with the text in the surrounding web page. That could be useful, for instance, to create a consistent appearance in an HTML presentation. Since the user coordinate system defined by the viewBox is unitless, we need to map the figure to its natural dimensions. This will ensure a correspondence between the scale of the figure and that of the web page.
As mentioned above, the natural scale of svglite’s figures is in points and is determined by the width and height arguments that you supply to the device functions (10’’ x 8’’ being the default). Although those dimensions are specified in inches, the coordinate system is scaled in points. Counting 72 points per inch, the default SVG surface is thus 720 x 576 pt. Note that the CSS standard defines 12pt to be equal to 16px, the default size of text in most browsers. Since 12pt is the default text size in svglite as well, a SVG scaled to its natural dimensions will appear seamless with web text of 16px. If the text in your web page has another size, you will have to compute a scale factor and adjust the dimensions of the SVG accordingly.
To sum up, displaying a plot according to its natural dimensions requires providing the user agent with information about what the lengths defined within the SVG actually mean. There are several ways to achieve this. First you can edit the SVG and enclose it in another pair of <svg> tags that defines height and width. The root <svg> element determines the final dimensions of the figure.
A second way is to enclose the figure in a <div> tag with appropriate dimensions and let the SVG figure rescale itself to that container (cf. the section on fluid scaling):
<div style="width: 720pt; height: 576pt"> <img src="figure.svg"> </div>Finally, you can directly specify the dimensions in the <img> or <object> tag that is embedding the figure. Note that the dimension attributes of those tags do not accept arbitrary units, so you will have to supply the dimensions in pixels. Just multiply the width and height measured in points with a factor of 16/12:
<img src="figure.svg" width="960" height="768">Từ khóa » Html Scale Svg To Fit
-
How To Scale SVG | CSS-Tricks
-
Scale SVG To Container Without Mask/crop - Stack Overflow
-
How To Make An Svg Scale With Its Parent Container ? - GeeksforGeeks
-
Scaling Of SVG Backgrounds - CSS: Cascading Style Sheets | MDN
-
PreserveAspectRatio - SVG: Scalable Vector Graphics | MDN
-
Intrinsic Sizing - SVG
-
How To Perfectly Fit An SVG To Its Contents Using JavaScript
-
Html Scale Svg Code Example - Code Grepper
-
Cropping & Scaling Images Using SVG Documents - Sara Soueidan
-
Scale SVG Graphics With Only Css - Gists · GitHub
-
Svg Scale Code Example - Code Grepper
-
Resizing An SVG When The Window Is Resized In D3.js - Chartio
-
Resolved: How To Scale SVG To Fit The Div - Daily Developer Blog
-
View Box | Svg | Datacadamia - Data And Co