How to make SVG appear without scroll bars in html -


How can I reveal SVG trustworthy without the scrollbar in HTML? Something useful is both in Firefox and Chrome.

  • The most basic step is to look at the "natural" width and height in the SVG document. Without fully expanded scroll bars Firefox generally does this. Chrome generally does not (unless I pre-knowledge the actual width and height).

  • The more advanced step is that I have an arbitrary width (say 400 pixels) to SVG, and SVG is properly scaled, while its aspect ratio is protected. Again, no scroll bars.

I do not want to know the natural dimensions of SVG in HTML. Changing HTML or CSS is best, however, changing SVG (once, not for every size, which I want) will also have to fix it.

Is such a thing possible?

Here are some examples of HTML that embeds a SVG.

& lt; Html & gt; & Lt; Head & gt; & Lt; Title & gt; SVG Sizing & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Embed Type = "image / svg + xml" src = "test.svg" & gt; & Lt; / Body & gt; & Lt; / Html & gt;

& lt; Embed & gt; The tag below & lt; Object & gt; Can be changed in

Here is an example test.svg:

   & Lt; Line x1 = "900" y1 = "22" x2 = "900" y2 = "47" stroke = "black" /> & lt; Text x = "587" y = "37" textLength = "25" font-family = "helvetica" font-size = "12" full = "black" & gt; Start & lt; / Text & gt; & Lt; Line x1 = "300" y1 = "272" x2 = "300" y2 = "297" stroke = "black" /> & lt; Line x1 = "900" y1 = "272" x2 = "900" y2 = "2 9 7" stroke = "black" /> & Lt; Text x = "583" y = "287" textLength = "32" font-family = "helvetica" font-size = "12" full = "black" & gt; Ends & lt; / Text & gt; & Lt; Line x1 = "150" y1 = "284" x2 = "582" y2 = "284" stroke = "black" stroke-dashre = "2,2" /> & Lt; Line x1 = "618" y1 = "284" x2 = "1050" y2 = "284" stroke = "black" stroke-dashher = "2,2" /> & Lt; / Svg & gt;    Update:   

OK, it seems that the device I am using is the small letter The view box is generating SVG with the attribute, though it is incorrect, and the attribute name is actually a camelcase view box because Eric writes down correctly.

With width / height removal or change in percentage, it allows me to get both parts of the question.

Thanks everyone!

If you want to fill the full width / height of the svg screen, then try it in the HTML document:

  & lt; Style & gt; Html, body {margin: 0; Padding: 0 embed {width: 100%; Height: 100%} & lt; / Style & gt;  

If you want to fill a small area of ​​the document, try removing the width and height attributes on the referenced SVG root element and make sure a viewbox attribute then the size of the container should be fixed properly, and there should be no scrollbar.


Comments

Popular posts from this blog

c# - sqlDecimal to decimal clr stored procedure Unable to cast object of type 'System.Data.SqlTypes.SqlDecimal' to type 'System.IConvertible' -

Calling GetGUIThreadInfo from Outlook VBA -

Obfuscating Python code? -