CODEWITHSUNDEEP
jqueryjquery-uisvg
user3142695
user3142695

Reputation: 17352

Resizing a svg-element

I want to change the dimension of a svg-Element. This is my HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/start/jquery-ui.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {  

        $('gfx_holder').draggable({
            handle: 'svg'
        });
    });
</script>
</head>
<body>    
    <div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 400 400">
            <rect x="0" y="0" width="200" height="200" style="fill:#FF0000" />
        </svg>
    </div>
</body>

But: The content is beeing loaded dynamically. So first the HTML looks like this:

<body>    
    <div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder">
    </div>
</body>

Via JS an editor (Draw2D) is beeing created:

var canvas = new draw2d.Canvas("gfx_holder");

So now the svg-elements are shown:

<body>    
    <div style="width:400px; height:400px; border:solid thin #888; padding:10px; border-radius:4px; background-color:#ccc;" id="gfx_holder">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 400 400">
            <rect x="0" y="0" width="200" height="200" style="fill:#FF0000" />
        </svg>
    </div>
</body>

Now I want to change the height of the svg-Element. Therefore I tried:

$( "#gfx_holder" ).resizable({
    handle: 'svg'
});

But this doesn't work. Sometimes the space of the svg canvas is not enough, so the user should be able to resize the svg-element...

Upvotes: 2

Views: 1464

Answers (1)

user3848987
user3848987

Reputation: 1657

Just set the CSS width of svg to 100% (important).

Upvotes: 2

Related Questions