Question

我想更改svg-Element的维度。这是我的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>

但是：内容是动态加载的。首先，HTML看起来像这样：

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

通过JS编辑（Draw2D）正在创建：

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

所以现在显示了svg-elements：

<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>

现在我想改变svg-Element的高度。所以我试过了：

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

但这不起作用。有时svg画布的空间是不够的，所以用户应该能够调整svg-element的大小......

Answer 1

只需将svg的CSS宽度设置为100％（重要）。

调整svg元素的大小

1 个答案: