jQuery SVG 无法添加图像答案

【问题标题】：jQuery SVG failed to add imagejQuery SVG 无法添加图像
【发布时间】：2014-07-10 13:52:40
【问题描述】：

我正在尝试使用 jQuery SVG 在 g 标记下添加 id 为“stationMarks”的图像，但它看起来像“var svg = $('#stationMarks').svg('get');”不行，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test</title>    
    <!--<script src="jquery/d3/d3.min.js">
    </script>-->
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script>
    <script src="jquery/jquery-1.7.2.js"></script><!-- moved to the top according to advice, but the image still not added-->
    <script type="text/javascript">
        $(function () {
            var svg = $('#stationMarks').svg('get');

            var cx = 21.0526903136934 * 120.343434 - 1470.84140760084;
            var cy = -21.9878694270822 * 43.343434 + 1859.94190338842;

            var cx_locate = cx - 10.5;
            var imageRef = 'swf/siteok.png';

            var image = svg.image(cx - 10.5, cy - 25, 21, 25, 'swf/siteok.png', { id: 'img' });
        });

    </script>
</head>
<body>
<svg width="1584pt" height="2448pt" viewBox="0 0 1584 2448" enable-background="new 0 0 1584 2448"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g>
...
        <g id="stationMarks">
        </g>
    </g>
</svg>
</body>
</html>

谁能告诉我它有什么问题？谢谢！

看起来像“svg.image(cx - 10.5, cy - 25, 21, 25, 'swf/siteok.png', { id: 'img' });”效果不佳，但根据参考资料我没有发现错误...有什么建议吗？

【问题讨论】：

最后，我转而使用 'getAttributeNS' 和 'setAttributeNS' 来代替，很遗憾我未能使用 jquery.svg 操作 dom，它会使我的工作更轻松，到目前为止它可以工作。谢谢

标签： jquery svg

【解决方案1】：

jquery 库是 head 标记的第一个。始终在其他脚本之上重新排序 jquery 库

 <script src="jquery/jquery-1.7.2.js"></script>
     <script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script>
    <script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script>

【讨论】：

非常感谢，它使“var svg = $('#stationMarks').svg('get');”有效并且是关键之一。但是图片仍然没有添加...

【解决方案2】：

问题是您最后添加了 jquery 文件。先添加 jquery 文件，然后再添加其他文件。

这样做的原因是其他的都是建立在 jquery 上的，当它们被包含时，它们的属性和功能查找 jquery 文件，当时没有包含。

所以顺序可能是这样的：

<script src="jquery/jquery-1.7.2.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svg.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svganim.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgdom.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgfilter.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svgplot.js"></script>
<script src="jquery/jquery.svg.package-1.4.5/jquery.svggraph.js"></script>

这会起作用。

【讨论】：