9

I have a resizable div. It has two inner divs. One of the inner divs has an svg element in it.

In the svg element I am adding and removing the content dynamically such that each time I add something in my svg. I increase its height by adding 20px to it and when I remove I subtract the height by 20px. When my svg height become greater than its parent div a scroll bar appears in the parent div. Similarly scroll bar is removed when svg height is less than parent div.

The problem starts when I do the resizing. I have added a viewbox option in my svg for resizing. But when I increase the size some of my svg elements are not visible. And when I decrease the size my svg get placed at a lower position leaving empty space.

Its all messed up in my mind that how to deal svg position/height with viewbox property.

I have tried to make a fiddle to simulate the behavior somehow. But here elements in svg are not adding dynamically and the svg height is constant.

Link to my code

Any help will be appreciated

A_user
  • 2,087
  • 6
  • 25
  • 33

1 Answers1

8

LATEST UPDATE:

Most important if you're going to use SVG it is better to be acquainted with spec or read a definite guide like "SVG Essentials" by J. Eisenberg, cause it is not such a trivial thing you might think at first.

Then if I understood you right, there is another approach jsFiddle.

First, set correctly the value of the viewBox attribute. In your current example in should be viewBox="0 0 130 220" so that all you content be visible (you have to specify at least 220 as the last number cause your last group <g> is translated i.e. it's coordinate system moved down to 200 units, if you don't do that your content will be not visible cause it is far beyond the outmost y-point of your viewbox, which in your jsfiddle is set to 70).

Second, specify the correct value for preserveAspectRatio which should be preserveAspectRatio="xMinYMax meet", which means (courtesy of the "SVG Essentials" by J. Eisenberg):

Align minimum x of viewBox with left corner of viewport.

Align maximum y value of viewBox with bottom edge of viewport.

meet means meet the content, not slice it, if it doesn't fit.

Third, if you are going to add elements to the bottom of your svg you have to change the viewBox value accordingly, cause if you will insert into it smth like:

<g transform="translate(0, 300)">
     <text>text 55 </text>
</g>

it will occur beyound your viewBox, which has a max y-point at 220 (if you would set it as I said earlier)

For now hope that helps, let me know.

OLD STUFF

remove style="height:200px" from your svg

Then if you need height, you can dynamically change the height of your svg

var $wrapper = $('#resize'),
    $svg = $('#svg2');
$wrapper.resizable({
    handles: 'se',
    aspectRatio: 400/200,
    resize: function(ev, ui) {
        $svg.css('height', ui.size.height);
    }
});

'#resize' - is the id of the wrapper of the svg

I'm now very confused of what you want. You specified viewbox attr on the svg. That means that only a part of your svg will be visible. Try to remove viewbox and see whether result looks satisfactory for you.

It then be all visible and normally adjusted to parent div

d.k
  • 4,234
  • 2
  • 26
  • 38
  • I cannot remove this because...I have to set some inital height – A_user Jul 27 '12 at 07:56
  • Thanks alot for your help and guidance but.....it will make my svg height = div height....in case i have to add more content to svg than it wont be visible – A_user Jul 27 '12 at 08:42
  • Hmm...okay thanks alot for your help.but I am new to it I don't know what is wrapper – A_user Jul 27 '12 at 08:48
  • 1
    @A_user , try to remove `viewbox` may be that's what you need – d.k Jul 27 '12 at 09:20
  • when I remove the viewbox then on resizing the text looks very small :( – A_user Jul 27 '12 at 09:28
  • No not only part of svg but I want my whole svg to be visible.that is when I increase size every thing inside my svg should be resize (bigger in size) as well as every thing should be visible – A_user Jul 27 '12 at 09:39
  • `viewbox` does not affect the text-size. It only specifies the part of your svg to be placed on available area. So text seems bigger, but when you resize `div` it retains the same size. If you didn't notice not all of your svg is visible. So if you add additional elements to `svg` (to the bottom) they will be invisible anyway, not because you set the height of `svg` to the parent div's one. – d.k Jul 27 '12 at 09:50
  • okay thanks alot @caligula for your help......one thing more so What approach should I use ? – A_user Jul 27 '12 at 10:01
  • Clarify your question a bit. You need to place `svg` in the resizable div. All your `svg` should be visible to user, right? When user makes the div bigger `svg` should increase accordingly, but when she decreases the div `svg` should decrease but not to the less than `200px` in height, right? – d.k Jul 27 '12 at 10:06
  • Yes right except the last point.when user decreases svg than there is no compulsion of 200px.Actually what I want is given in points. 1) content is added dynamically to svg each time content is added the size of svg become old_svg_size + 20 px.if the size goes beyond the size of div containg svg then scroll bar appear on div.(2) when user resizes the div I want same thing to shown bigger that is if I had scroll bar in un-resized div I want to have same scroll bar with same scrolling area to appear but i should appear a little bigger.But I am unable to achieve..You got my point ?? – A_user Jul 27 '12 at 10:20
  • Thanks a lot for your guidance now I many of my misconceptions are removed and now i am thinking of some other way to solve the problem thanks :) – A_user Jul 28 '12 at 09:29
  • So why the answer is accepted? Edit your question, may be post some pictures of how you would like the div behave on different sizes, so it would be easier to answer question properly – d.k Jul 28 '12 at 09:32
  • here yet another jsFiddle http://jsfiddle.net/LnH2c/7/ , where scrollbars preserved during div increase – d.k Jul 28 '12 at 09:39