Моя цель - получить <div> с фиксированным размером (динамически устанавливаемым через JavaScript), который содержит только элемент <svg>. Когда это <svg> больше, чем родительские полосы прокрутки <div> должны появиться. Когда он меньше, его размер должен быть равен размеру родительского <div> - но полосы прокрутки не должны появляться.
Это не работает, как ожидалось, так как немного кода может показать:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="lib/jquery-1.4.4.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#editor').svg();
});
</script>
</head>
<body>
<div id="editor" style="width:500px;height:500px;overflow:auto"></div>
</body>
</html>
Это создаст почти пустую страницу, содержащую <div> с фиксированным размером 500x500px - и <svg width="500" height="500"> внутри. У этого SVG есть полосы прокрутки - хотя они не нужны, поскольку размер будет идеально подходить.
То, что это произойдет только с <svg>, можно легко показать, когда демо-версия изменена на
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="lib/jquery-1.4.4.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="lib/jquery.svg.js"></script>
</head>
<body>
<div style="width:500px;height:500px;overflow:auto"><div style="width:500px;height:500px"></div></div>
</body>
</html>
Так что теперь <div> находится внутри родительского элемента <div> точно такого же размера - и появляются полосы прокрутки.
Может кто-то просветить меня, почему <div> и <svg> ведут себя по-разному?
И как я могу встроить SVG в родительский элемент <div> без появления полос прокрутки, когда размер одинаков (и с появлением, когда размер становится больше?)
Примечание: это проверено с Firefox и Chromium.