假设这个:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
为什么我什么都没看到？
我想通过jQuery在SVG中添加项目.我可以插入诸如<rect />或之类的标签,<text />但我无法插入带有标签的图像<image />.
此标记会<img />自动生成,无法在SVG中显示图像:http:
//jsfiddle.net/G4mJf/
我怎么能阻止这个？如果不可能,是否有另一种方法可以使用JavaScript/jQuery在SVG中插入图像.
如果文件命名为*.html,则以下代码可以工作(在控制台中,您可以看到两个日志消息作为检测到的元素),但如果我命名为*.xhtml,则不会选择元素.为什么这些表现不一样？只有当类名包含在选择器中时才会出现问题,因此$("#cvs rect")在两种情况下均可使用,
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head><body>
<svg id="cvs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 100" version="1.1" baseProfile="full">
<rect class="drag resize" x="50" y="30" width="50" height="30" />
<rect class="drag resize" x="5" y="5" width="90" height="50" />
</svg>
<script>
$(document).ready(function() {
$("#cvs rect.resize").each(function() {
console.log("selected");
});
});
</script>
</body></html>
我正在尝试使用jQuery和NO OTHER LIBRARIES创建一个SVG条形图但是当我创建我的矩形时,它们不会显示在浏览器中,尽管键入html的相同内容会显示出来.
var data = [4, 8, 15, 16, 23, 42];
var chart = jQuery("#chart");
jQuery.each(data, function(index, value) {
var bar = jQuery("<rect/>");
chart.append(bar);
bar.attr("y", index * 20)
.attr("width", value * 10)
.attr("height", 20);
});
和HTML:
<svg id="chart" class="chart" width=420 height=120 style="display: block;">
<rect y="0" width="40" height="20"></rect> <!--added to test-->
</svg>
输入的rect标签看起来很好,并且使用Chrome中的开发人员工具,它看起来与我的代码生成的第一个相同,但生成的代码不会显示.