Intrinsic Sizing - SVG
Có thể bạn quan tâm
Issue 1: Allow graphics to scale even with fixed size
Tools often output:
<svg width="300px" height="723px">...</svg>Such an SVG won't scale which is particularly annoying if you put it in an <img> or <iframe> element and hope it will resize to fit the box of that element.
The relevant spec text is:
"If either/both of the ‘width’ and ‘height’ of the rootmost ‘svg’ element are in percentage units (or omitted), the aspect ratio is calculated from the width and height values of the ‘viewBox’ specified for the current SVG document fragment" https://svgwg.org/svg2-draft/coords.html#IntrinsicSizing
Authors must manually edit the file and remove the width/height or set them to a percentage value and ensure a suitable viewBox is set.
Alex Bell suggests adding auto keywords so that you could override this behavior [Brian: From where? An external stylesheet? The stylesheet of the containing document if the SVG is included in a seamless iframe?]
.my-hardcoded-svg { width: auto !important; height: auto !important; viewbox: auto; }Related to generating a viewBox for svg-in-img, see ISSUE-2258 (SVG Integration).
Issue 2: Does SVG conflate viewport and viewbox?
Alex Bell suggests, "the spec doesn’t distinguish between the intrinsic sizing of an SVG viewport". Furthermore, the combination of CSS sizing (object-fit) "doesn’t preserve the possibility of different aspect ratios for the viewport and the viewbox, which object-fit requires in order to work properly as written."
Currently seeking clarification on what exactly is missing here.
Brian's attempt to summarize the complex interaction between object-fit and SVG's object sizing:
Firstly, CSS' object-fit sizing determines the concrete object size of the replaced content which is possibly different to the CSS box the replaced content is positioned into. Secondly, SVG takes this concrete object size as the viewport into which it sizes the viewbox by applying preserveAspectRatio etc.Issue 3: Interop is poor for sizing of replaced content
Alex Bell, showed some cases where interop for replaced content is broken.
David Vest followed up explaining where some of the differences come from but agreed the interop story here isn't great.
Alex suggests a detailed algorithm for generating rootmost viewport dimensions needs to be written.
Từ khóa » Html Scale Svg Element
-
How To Scale SVG | CSS-Tricks
-
Resizing SVG In Html? - Stack Overflow
-
Scale - SVG: Scalable Vector Graphics - MDN Web Docs
-
Basic Transformations - SVG: Scalable Vector Graphics | MDN
-
How To Make An Svg Scale With Its Parent Container ? - GeeksforGeeks
-
How To Resize SVG In HTML - W3docs
-
Html Scale Svg Code Example - Code Grepper
-
Scale SVG Graphics With Only Css - Gists · GitHub
-
Resizing An SVG When The Window Is Resized In D3.js - Chartio
-
SVG Viewport And ViewBox (For Complete Beginners) - Web Design
-
Scaling SVG Elements - CodePen
-
HTML Svg ViewBox Attribute - Dofactory
-
Html – Scale An SVG Element Using A Transform Origin - ITecNote
-
How To Resize A SVG Image - Medium