Geek asks and answers

How to use viewbox when svg height changes dynamically

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

In the svg element, I add and remove content dynamically, so every time I add something to my svg. I increase its height by adding 20 pixels to it, and when I delete, I subtract the height by 20 pixels. When my svg height gets bigger than its parent div, a scrollbar appears in the parent div. Similarly, the scrollbar is removed when the svg height is less than the parent div.

The problem starts when I resize. I added a view option in my svg to resize. But when I increase the size, some of my svg elements are not visible. And when I reduce the size, my svg falls into the lower position, leaving an empty space.

It ruined everything in my mind that how to enable svg position / height with the viewbox property.

I tried to make a violin to somehow mimic the behavior. But here the elements in svg are not added dynamically, and the height of svg is constant.

Link to my code

Any help would be appreciated

+5
source share
1 answer

LAST UPDATE:

, SVG, , , "SVG Essentials" . , , .

, , jsFiddle.

viewBox. viewBox="0 0 130 220", ( 220, <g> , 200 , , , y- , jsfiddle 70).

-, preserveAspectRatio, preserveAspectRatio="xMinYMax meet", ( "SVG Essentials" J. Eisenberg):

x viewBox .

y viewBox .

meet , , .

-, svg, viewBox, smth, :

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

viewBox, y- 220 ( , )

, , .

OLD STUFF

style="height:200px" svg

, , svg

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

'#resize' - id svg

, . viewBox attr svg. , svg. viewBox , .

div

+5

More articles:


All Articles