CodingForums.com - View Single Post

johnsmith153 · 11-13-2012, 03:26 PM

I am trying to use the <svg> tag in this way:

http://page-test.co.uk/svg.html

Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size. At the moment it doesn't at all.

I would like the option of both having the shape always fill a certain % of the red box, and also for the green shape to be a fixed size (although never be larger than the red box).

Three things can't be changed in my code:
(1) The red box, although anything can be added inside (e.g. another div wrapping the <svg> tag).
(2) Must use the <svg> tag rather than a .svg file in either <img>, <embed> or <object>
(3) For example purposes, keep the green shape, rather than another example.

I can't see how all this is possible, which it would be using a bitmap inside <img>.

Thanks for any help.

11-13-2012, 03:26 PM	PM User \| #1
johnsmith153 New Coder Join Date: Mar 2012 Posts: 81 Thanks: 7 Thanked 0 Times in 0 Posts	Styling with an SVG tag I am trying to use the <svg> tag in this way: http://page-test.co.uk/svg.html Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size. At the moment it doesn't at all. I would like the option of both having the shape always fill a certain % of the red box, and also for the green shape to be a fixed size (although never be larger than the red box). Three things can't be changed in my code: (1) The red box, although anything can be added inside (e.g. another div wrapping the <svg> tag). (2) Must use the <svg> tag rather than a .svg file in either <img>, <embed> or <object> (3) For example purposes, keep the green shape, rather than another example. I can't see how all this is possible, which it would be using a bitmap inside <img>. Thanks for any help.