css - Making SVG Responsive based on width 100% like images -


all day long working on making svg responsive , reading various articles, , testing different kind of code in stack overflow. unfortunatly unsucessful in making svg expand based on container div, images when define max-width:100%

i using svg stacks technique: http://simurai.com/blog/2012/04/02/svg-stacks/ example of code: http://jsfiddle.net/simurai/7gcgr/

i noticed after size of svg, doesn't expand anymore , maximum size become 150px if give 100% width. if force inserting width & height sizes grows bigger, not want. want resizes based on width of container, becoming terribly huge without size limitations.

in svg height , width removed.

my code:

		/* reset - http://meyerweb.com/eric/tools/css/reset/ */  		html, body, applet, object, iframe, svg, h1, h2, h3, h4, h5, h6, p, blockquote, pre,  		a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,  		small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,  		fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure{  			margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; font-style:inherit;  			font-family:inherit; text-decoration:inherit; text-align:left; background:transparent;  		}  		header, footer, figure, details, hgroup, section, article, nav, aside{display:block;}  		img, object, audio, video, svg{width:100%;}    	    .vector{display:block; width:100%; height:auto;}          .vector embed{border:1px solid #f00; width:100%;}*/  	    .box{border:1px solid #f00; width:700px;}
<div class="box">  	<object class="vector">  		<embed src="http://life-is-simple.net/sprite.svg#winner-cup" />  	</object>        	<img class="vector" src="http://life-is-simple.net/sprite.svg#winner-cup">  	<img class="vector" src="http://life-is-simple.net/sprite.svg#lottery-ticket">  	<img class="vector" src="http://life-is-simple.net/sprite.svg#monitor-number">  	<img class="vector" src="http://life-is-simple.net/sprite.svg#emblem">  </div>

i appreciate help, not know test anymore make work it, when see simple included svg inserted go 100%, trying , techniques not see difference (only ie behave expanding svg, firefox , chrome not)

the reason image won't scale because doesn't have viewbox.

you linking <g> element. group inside svg has viewbox, viewbox won't used. browser viewbox on outer-most <svg> element. element doesn't have one.

to prove point, copy winner-cup viewbox root/outermost <svg> element. svg scale 100%.

<svg id="icon" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 971.9 842.9">

as reason why scaling height of 150px. find answer here:

svg height percentage not working under linux browsers?

in case parent element <embed> (and <object>) rather <body>, reason same.


Comments

Post a Comment

Popular posts from this blog

IF statement in MySQL trigger -

this query code in mysql trigger. if 1=2 select 'yes'; else select 'no'; end if; but has following error: if '1'='2' select 'yes' error code: 1064. have error in sql syntax; check manual corresponds mysql server version right syntax use near 'if '1'='2' select 'yes'' @ line 1 0.000 sec what solution?
Read more

c++ - What does MSC in "// appease MSC" comments mean? -

i run across // appease msc in c++ comments, e.g. here : const int& array::operator[](int offset) const { int mysize = getitssize(); if (offset >= 0 && offset < getitssize()) return ptype[offset]; throw xboundary(); return ptype[offset]; // appease msc! } what msc stand ? the author means microsoft's compiler, more formally known msvc.
Read more

javascript - Blogger related post gadget image Resize s72-c [ Need Expert Help ] -

i run blogger blog , use follow code javascript code (requires no jquery) show related post labels/categories of post. <script type='text/javascript'> var defaultnoimage=&quot;http://1.bp.blogspot.com/-m72rpguntq0/vuokijudn_i/aaaaaaaaboi/lq18sceunsg/w72/favicon-tik.png&quot;; var maxresults=16; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;related posts&quot;; </script> <script type='text/javascript'>//<![cdata[ var relatedtitles = new array(); var relatedtitlesnum = 0; var relatedurls = new array(); var thumburl = new array(); function related_results_labels_thumbs(json) { (var = 0; < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedtitles[relatedtitlesnum] = entry.title.$t; try { thumburl[relatedtitlesnum] = entry.media$thumbnail.url } catch (error) {...
Read more