{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Deceive 欺骗 的问题《could not able to put viewbox,viewport,userspace t》','https://www.manongdao.com/q-949638.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<html>
<head></head><body>
<div>
<svg width="300px" height="200px" viewBox="0 0 2800 1200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="0" y="0" width="1500" height="1000" fill="yellow" stroke="blue" stroke-width="12"/>
<path fill="red" d="M 750,100 L 250,900 L 1250,900 z"/>
<text x="100" y="600" font-size="200" font-family="Verdana">
Stretch to fit
</text>
</svg>
</div></body>
</html>
I have the above svg markup, and have the following doubts.
- In the svg tag width,height are mentioned as 300px, 200px respectively. But when i inspect it in with layout panel(in firebug) it shows 172px width and 119px height. Why is my svg element not taking the dimension as i specified.
- When i delete the viewBox attr in svg element, its taking the dimension of 1596*1096. Again svg element not taking the dimension as i specified and no graphics is visible on the screen.
- If i give preserveAspectRatio="none" on the svg tag there is a change in the dimension of the svg element, but thats also not correct.
By searching, found that view box dimension gives the actual dimension of the svg, which is mapped to the width of the svg element container(say a div in a html page.)
Could not able to put viewbox,viewport,userspace together and understand things.
I think, basically, Firebug is lying to you. Add an outline to the
svgelement with CSS and you'll see it is taking up 300x200 pixels of space. You can also try adding the width and height to thedivcontainer, however if you take theviewBoxoff the browser no longer has enough information to scale the image.For some more examples, I have a test page which has various combinations of
viewBoxandwidth&heightspecified in different scenarios for scaling thesvgelement with CSS.