HTML5 SVG JQuery Проблема в Firefox 3.6
-
01-10-2019 - |
Вопрос
Вот мой файл HTML (jQuery необходимо и включить HTML5 в Firefox о: config)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('svg').append("<rect x='100px' y='0px' height='100px' width='100px' fill='red' />");
})
</script>
</head>
<body>
<svg viewbox="0 0 300px 600px">
<rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
</svg>
</body>
</html>
Проблема в том, что я не вижу красный прямоугольник, когда я загружу эту страницу. В Firebug красный прямоугольник квадрат похоже на то, что это потемнело.
Решение
Итак, кажется, это проблема пространства имен, следующий код работает
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
rect = document.createElementNS('http://www.w3.org/2000/svg', "rect");
rect.setAttribute("x", "100");
rect.setAttribute("y", "0");
rect.setAttribute("width", "100");
rect.setAttribute("height", "100");
rect.setAttribute("fill", "red");
$('svg').append(rect);
})
</script>
</head>
<body>
<svg viewbox="0 0 200 100" width="200px" height="100px">
<rect x='0px' y='0px' height='100px' width='100px' fill='blue' />
</svg>
</body>
</html>
Другие советы
Во-первых, вы пропустите DOCTYPE HTML5, который реализован так
<!DOCTYPE html>
В верхней части вашего документа.
Тогда вам нужно добавить документ готов!
$(document).ready(function(){
//The code here runs when the document is fully loaded into the DOM.
//Create a blank rect, add its attributes
the_box = $("<rect/>")
.attr('x','100px').attr('y','0px')
.attr('height','100px').attr('width','100px')
.attr('fill','red');
//Append the jQuery variable to the selector.
$('svg[viewbox]').append(the_box);
});
Дай это идти.
Немного поздно, но вместо того, чтобы добавить пространство имени в DOC, используя jQuery, вы можете добавить его в качестве атрибута на <svg>
ярлык:
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300px 600px">
...
</svg>
Не связан с StackOverflow