这就是它的样子( Chrome 浏览器):
http://i.imgur.com/ssP7EuG.png
一切都很好而且非常快。
但是我意外地用 Firefox 测试了我的原型,我不知道那里发生了什么。这是同一个例子的图片:
http://i.imgur.com/aoAPJhV.png
以下是HTML代码的另一张图片:http://i.imgur.com/PVA7wXY.png
向您展示svg图片。如您所见,代码有效。
所以是怎么回事?为什么Firefox有这么多问题? HTML代码中是否有错误?我已经验证了它,但没有找到任何东西。
已经尝试过:
我还能尝试做些什么。通过background-image加载svg?但我真的想知道在Chrome中运行的原因,而不是在Firefox中。
特别欢迎任何帮助,特别是SVG加载问题。谢谢。
function initializeGraph(){
zoom.on("zoom", zoomed);
drag.on("dragstart", dragstart);
force
.size([width, height])
.gravity(.1)
.charge(-400)
.friction(0.9)
.theta(0.9)
.linkStrength(0.9)
.distance(55)
.alpha(0.1)
.on("tick", tick);
force.start();
svg = d3.select("#main-right")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom).on("dblclick.zoom", null);
svg
.append("svg:defs").selectAll("marker")
.data(["end"])
.enter().append("svg:marker")
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 32)
.attr("refY", -0.05)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5")
.attr('fill', '#359AF4');
container = svg.append("g");
link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.attr("marker-end", "url(#end)");
node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", function(d) { click(d); })
.on("dblclick", function(d) { dblclick(d); })
.on('contextmenu', function(data, index) {
d3.event.preventDefault();
updateGraphByRemoveElement(data, index);
})
.call(drag);
node
.append("circle")
.attr("class", "bgcircle")
.attr("r", 20)
.attr("cx", 0)
.attr("cy", 0)
.style("fill", '#eee')
.style("stroke", '#fff')
.style("stroke-width", '0.5px');
node
.append("image")
.attr("class","svgimage svgimagePerson")
.attr("xlink:href", function(d) {
if (d.class == "Person") {
return "pics/node_person.svg";
} else {
return "pics/node_appln.svg";
}} )
.attr("x", "-20px")
.attr("y", "-20px")
.attr("width", "40px")
.attr("height", "40px");
node
.append("text")
.attr("class", "nodetext")
.attr("x", 20)
.attr("y", 4)
.text(function(d) { return d.name; });
node
.append("circle")
.attr("class", "linkcountercircle")
.attr("r", 7)
.attr("cx", 0)
.attr("cy", -16);
node
.append("text")
.attr("class", "linkcountertext")
.attr("x", -3)
.attr("y", -13)
.text(function(d) { return d.linkCount; });
setzoom();
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="appln.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-516.42857"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1784"
inkscape:window-height="998"
inkscape:window-x="1397"
inkscape:window-y="2"
inkscape:window-maximized="0" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="Kreis"
style="display:none">
<path
sodipodi:type="arc"
style="fill:#d7d1d7;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path4757"
sodipodi:cx="502.85715"
sodipodi:cy="502.85715"
sodipodi:rx="500"
sodipodi:ry="500"
d="m 1002.8571,502.85715 a 500,500 0 1 1 -999.9999528,0 500,500 0 1 1 999.9999528,0 z" />
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-52.362183)"
style="display:inline">
<rect
style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="rect2993"
width="611.33856"
height="646.02979"
x="194.33067"
y="240.5731"
ry="55.467205" />
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer"
style="display:inline">
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"
id="path3777"
d="m 282.61027,386.12047 c 1.5219,-0.68605 3.0837,-1.28961 4.5656,-2.05814 2.0565,-1.0665 8.0581,-4.57512 6.0381,-3.44099 -35.9669,20.19393 -35.5519,21.01611 -20.0669,10.42619 2.8209,-1.92919 5.6323,-3.87282 8.418,-5.85257 2.7755,-1.97255 5.5099,-4.00246 8.2648,-6.00369 11.9369,-8.99036 23.6675,-18.25753 35.8556,-26.90883 -6.7421,6.25644 34.234,-32.30056 47.7826,-21.04814 5.0822,4.22079 7.4032,11.27585 9.9237,17.08081 6.0372,16.62043 10.983,33.60845 17.4233,50.08315 3.3086,6.99982 6.2525,14.69206 11.6725,20.42923 2.4073,2.54811 4.5985,3.76683 7.4922,5.69617 1.5463,0.52856 3.0175,1.38129 4.6388,1.58569 6.8519,0.86386 13.7248,-2.88592 19.424,-6.0595 2.664,-1.48346 10.5161,-6.17442 7.8394,-4.71395 -9.0085,4.91532 -17.8933,10.05413 -26.84,15.0812 15.2681,-10.19656 30.7768,-20.01291 46.0701,-30.17136 15.2232,-11.07461 30.9494,-19.63299 47.9213,-28.94724 0.903,-0.49554 2.0498,-0.54939 3.0662,-0.38253 2.8035,0.46027 4.3643,2.59488 6.2758,4.4023 8.0224,9.50121 14.7288,20.09443 21.8795,30.27303 6.4598,8.92388 11.1783,14.63279 22.3213,16.58278 7.1265,0.44393 13.6329,-1.8148 19.8419,-5.12267 1.6152,-0.86048 6.3225,-3.68893 4.7267,-2.79307 -10.6038,5.95286 -21.1678,11.97641 -31.7517,17.96461 -1.4894,12.53362 28.1966,-27.86328 43.59,-22.39572 5.3481,1.89956 14.7708,10.68441 19.2426,14.44207 6.9742,5.66186 13.7877,12.81557 23.5796,11.99084 5.7454,-0.48391 8.8284,-2.59482 13.9567,-5.06489 -51.8801,31.70654 -24.6074,13.65632 -13.6637,2.02276 6.1828,-6.57257 11.7784,-13.7053 17.4507,-20.71282 7.1152,-8.78922 14.029,-17.77706 22.2018,-25.62149 2.9005,-2.87878 6.4774,-4.8409 9.8697,-7.04643 0,0 39.4189,-15.80282 39.4189,-15.80282 l 0,0 c -3.1008,2.91565 -6.9134,4.40145 -10.3226,6.90486 -8.6456,7.58247 -15.9341,16.41684 -23.1452,25.35713 -7.8892,9.65737 -15.5761,19.52065 -24.3873,28.3712 -2.2901,2.30044 -4.3149,4.96668 -7.0441,6.72402 -13.9736,8.99745 -28.5923,16.95133 -42.8884,25.427 -6.2513,2.19143 -8.7619,3.81157 -15.4576,3.38813 -10.13,-0.64062 -17.38,-7.86941 -24.8374,-13.84808 -4.5467,-3.65042 -9.3451,-8.20004 -14.709,-10.67846 -1.0152,-0.46905 -2.1371,-0.83422 -3.2552,-0.81164 -1.0275,0.0207 -3.8138,1.47346 -2.9374,0.9367 10.6664,-6.53257 21.5846,-12.64456 32.3769,-18.96685 -13.297,7.89387 -26.5322,15.89278 -39.891,23.6816 -8.0639,4.70164 -17.2572,7.06794 -26.5386,5.55806 -11.2436,-3.31412 -17.1903,-9.79468 -23.6916,-19.32935 -6.8201,-9.90358 -13.2732,-20.33579 -21.6866,-28.95663 -2.0345,-1.18719 -1.9559,-1.78153 -4.1041,-1.06058 -0.8053,0.27024 -3.0261,1.53983 -2.2951,1.10715 60.6206,-35.88389 35.8417,-21.98229 23.5874,-12.69755 -15.5545,10.03418 -31.0762,20.12858 -46.4887,30.37669 -14.4857,8.57755 -28.928,17.22871 -43.457,25.73265 -10.9389,6.40261 -23.0373,12.52922 -35.26,5.81641 -3.5712,-2.59468 -5.1932,-3.47287 -8.1394,-6.81515 -5.4949,-6.23371 -8.5669,-14.22163 -11.8415,-21.71809 -6.1587,-16.48782 -11.0686,-33.4051 -17.4027,-49.82774 -1.9153,-4.13883 -4.1512,-11.52881 -8.7516,-13.84323 -2.5234,-1.26951 -6.447,1.32706 -5.5784,0.79588 10.4731,-6.40522 21.1622,-12.45045 31.7434,-18.67567 -12.6729,8.39995 -24.5152,17.98739 -36.6784,27.09396 -24.7109,18.27208 -50.4545,35.76406 -78.67989,48.13753 0,0 33.33199,-26.09393 33.33199,-26.09393 z"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"
id="path3779"
d="m 282.06867,568.36093 c 1.2904,-0.70367 2.5808,-1.40734 3.8713,-2.11101 -10.2843,5.89133 -20.4818,11.93667 -30.8527,17.67399 -1.9879,1.09975 3.8367,-2.43779 5.6891,-3.75317 5.7073,-4.05294 11.0371,-8.65674 16.4092,-13.13373 8.7284,-7.82004 17.8822,-15.17414 26.302,-23.33131 12.6121,-13.56953 30.6888,-35.44486 50.1675,-30.51101 6.7451,4.23055 11.6736,10.91751 16.7039,16.97727 6.6667,7.83884 13.931,14.59564 23.3704,18.80498 12.3136,4.50635 25.1184,3.26313 37.7309,0.99993 7.8035,-1.74823 15.38,-4.56975 22.3887,-8.43264 1.5419,-0.84986 6.0608,-3.5858 4.5283,-2.71896 -10.5908,5.99069 -21.1366,12.06085 -31.7049,18.09127 5.6576,-3.18892 9.5936,-8.14438 13.685,-13.00115 30.7268,-19.46056 33.0288,-31.00075 46.7531,-11.60983 4.3026,7.27522 9.9197,13.6508 15.4188,20.03509 6.9758,8.31175 16.6301,10.4899 26.8879,11.8354 14.5435,0.89509 28.7121,-1.36165 42.3603,-6.27752 9.8831,-4.46247 18.0421,-9.05418 28.9645,-6.23198 9.1966,2.95039 18.4819,3.85755 28.0462,2.8705 13.9384,-3.20338 26.2472,-10.62696 38.6708,-17.38938 -4.7265,2.71756 17.3488,-10.00361 13.0022,-7.5191 -9.9376,5.68029 -39.6913,22.82404 -29.7921,17.07702 13.4726,-7.8216 26.903,-15.71994 40.5125,-23.30083 1.2354,-0.68814 2.5747,-1.28789 3.9756,-1.48039 1.3057,-0.17942 2.6229,0.26233 3.9344,0.39349 8.9601,4.62909 14.6891,13.77651 20.5898,21.67851 0,0 -36.0118,21.36269 -36.0118,21.36269 l 0,0 c -3.6087,-4.82577 -10.3737,-15.06423 -15.909,-17.52751 -0.844,-0.37556 -1.8139,-0.35075 -2.7208,-0.52612 -0.9831,0.23999 -2.0003,0.36826 -2.9491,0.71999 -1.2107,0.44885 -4.6053,2.32967 -3.4957,1.6692 10.2464,-6.09918 41.2203,-23.99804 30.9187,-17.99269 -18.0645,10.53065 -36.057,21.21092 -54.3063,31.42692 -12.6798,6.89093 -25.5456,14.22702 -40.0678,16.22662 -9.8794,0.41867 -19.4127,-0.96875 -28.976,-3.47089 -9.6792,-0.76664 -18.3575,4.14671 -27.1802,7.48373 -14.1833,4.31521 -28.8663,6.31373 -43.7021,4.84612 -11.146,-1.84754 -21.2404,-5.1998 -28.7245,-14.20243 -5.5663,-6.49618 -11.2954,-12.91274 -15.9009,-20.14476 -1.3209,-1.76521 -2.6,-3.84897 -4.4869,-5.09218 -1.4629,-0.96387 -1.9629,0.30944 -1.581,0.0933 11.8575,-6.71042 23.6819,-13.47916 35.5228,-20.21873 -5.9617,1.04382 -8.2864,10.92929 -14.3429,13.01291 -21.8697,12.85221 -42.3781,28.56261 -67.6407,33.33741 -13.2939,1.81162 -26.683,2.36465 -39.3448,-2.93616 -9.6914,-4.90126 -17.3566,-12.03088 -24.367,-20.29493 -3.7346,-4.40284 -9.2315,-12.5031 -15.1719,-13.64622 -14.1527,5.15793 -0.4929,0.28367 32.9975,-19.48851 0.6959,-0.4108 -1.5407,0.53327 -2.2236,0.96529 -3.1717,2.00674 -5.328,5.27135 -7.7178,8.05673 -8.3816,8.44446 -17.74,15.76469 -26.5162,23.79017 -6.8571,5.7727 -14.0361,12.78916 -21.7151,17.38448 -13.5221,8.09202 -27.2149,15.89529 -40.8314,23.82725 -1.3608,0.79269 -2.73369,1.56443 -4.10051,2.34664 0,0 32.93231,-26.64378 32.93231,-26.64378 z"
inkscape:connector-curvature="0" />
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"
id="path3781"
d="m 282.98947,718.12461 c 4.9527,2.15041 10.9153,3.68482 16.1839,1.50698 1.4919,-0.61666 5.5219,-3.34312 4.1063,-2.56735 -10.49,5.74852 -20.8902,11.65928 -31.3353,17.48891 8.6816,-6.58913 13.9911,-16.04156 18.5217,-25.71883 2.6215,-6.17185 4.9888,-12.4938 6.6558,-18.99541 4.7218,-18.24246 12.4012,-14.44159 40.1142,-27.70729 0.1886,-0.0903 5.3479,3.81848 5.4141,3.86789 6.6337,5.95018 13.5988,11.44947 21.0967,16.27034 8.9783,4.63442 17.4982,10.99042 27.2449,14.01399 2.18,0.67626 4.4556,0.99322 6.6834,1.48983 21.0197,1.1341 40.8067,-7.20508 59.7446,-15.30434 12.6072,-6.16764 47.6615,-25.5382 -9.6728,6.49056 -2.1599,1.20659 4.206,-2.60665 6.2991,-3.92572 4.4294,-2.7914 5.5844,-3.57037 9.8128,-6.33573 13.9237,-9.82374 32.5967,-41.90432 49.5217,-26.82673 4.9374,4.85579 9.6609,9.91583 14.8677,14.48819 5.6573,4.76851 10.3465,4.93025 17.4209,4.98489 5.4673,-0.86894 11.22,-1.8722 16.2921,-4.22571 10.2621,-4.7618 -3.1328,0.57867 6.5847,-3.16 0.942,-0.13033 1.8835,-0.5178 2.8259,-0.39098 6.3457,0.85388 13.4308,10.16669 17.6956,14.39074 7.0727,7.3289 14.7568,14.04866 24.1151,18.22289 7.2445,2.13236 12.7624,0.51085 19.3333,-2.43954 2.5447,-0.82673 4.8884,-1.67945 7.2618,-2.87411 0.7004,-0.35253 2.8263,-1.3525 2.1474,-0.96013 -40.5616,23.44378 -45.4995,26.5989 -32.7612,18.55775 1.3776,0.75362 3.052,-3.08015 3.1042,-3.11058 37.5454,-21.8618 25.7531,-28.92109 39.363,-19.99817 3.9797,1.93668 8.0463,3.27416 12.4089,4.0958 7.5786,2.48437 15.5764,2.75429 23.3576,4.16146 8.1588,2.00878 16.4479,1.20508 24.7188,0.64744 7.0678,-1.41797 14.1647,-2.59219 21.3467,-3.22368 4.7587,0.46406 2.3864,0.20891 7.117,0.76491 0,0 -34.3858,24.51268 -34.3858,24.51268 l 0,0 c -4.4983,-0.27887 -2.2705,-0.2557 -6.6835,-0.0832 -7.1549,0.82043 -14.2082,2.2831 -21.3712,3.01842 -8.4588,0.41571 -16.875,0.4574 -25.1925,-1.44511 -7.9363,-1.13986 -15.8946,-2.10277 -23.6526,-4.22438 -4.346,-1.05683 -8.4277,-2.78927 -12.7374,-3.91991 -8.3282,11.83295 -1.6139,2.11694 35.4553,-19.97193 0.2751,-0.16392 -0.623,-0.37313 -0.9238,-0.26351 -1.2278,0.44734 -0.5243,3.69435 -2.3244,3.69034 -16.0856,9.84732 -31.6378,20.81426 -49.554,26.77693 -7.0547,2.37812 -14.1964,2.43238 -21.1331,-0.56189 -9.3806,-4.93498 -17.3064,-11.87058 -24.648,-19.47175 -3.5874,-3.44562 -8.2842,-9.90164 -13.5991,-10.80905 -1.426,-0.24347 -3.2174,0.62019 -4.4549,1.07185 -7.5382,3.40557 -15.5198,5.9301 -23.8827,5.8744 -7.3585,-0.43691 -13.6695,-2.20171 -19.186,-7.37627 -4.8532,-4.55981 -9.3557,-9.54497 -14.5936,-13.65864 -14.6781,1.45207 -1.1423,0.2572 34.572,-20.39599 0.4969,-0.28735 -1.0843,0.42807 -1.5306,0.78899 -2.9886,2.41658 -4.1195,6.49333 -7.8995,8.10767 -24.7774,16.47891 -50.5112,31.70388 -77.4877,44.29146 -19.6349,8.01321 -40.3004,16.25041 -61.9154,13.62513 -2.3747,-0.6547 -4.7985,-1.15207 -7.1241,-1.96408 -9.8667,-3.44509 -18.6667,-9.62309 -27.8183,-14.51325 -7.51,-4.88251 -14.4619,-10.45687 -21.4618,-16.02273 -0.7771,-0.40729 -1.4822,-1.00062 -2.3311,-1.22186 -0.4588,-0.11957 -1.8058,0.49524 -1.4004,0.24941 11.6573,-7.06872 23.5403,-13.75932 35.2349,-20.76599 0.4105,-0.24593 -0.9893,0.16217 -1.3569,0.46853 -0.8923,0.74372 -1.6049,3.0297 -1.9425,3.88175 -1.4297,6.86309 -3.9632,13.39579 -6.5093,19.90981 -4.7047,10.01898 -9.6386,20.10956 -17.8734,27.78195 -13.4819,7.99434 -26.7895,16.29029 -40.4458,23.98303 -7.1077,4.00384 -15.9996,1.06351 -22.89081,-1.71136 0,0 35.45741,-23.32968 35.45741,-23.32968 z"
inkscape:connector-curvature="0" />
</g>
</svg>
答案 0 :(得分:1)
http://commons.wikimedia.org/wiki/File%3ATux.svg
不是SVG图片。这是一个html页面,其中包含一个PNG图像,显示SVG图像在显示时的外观。
您正在寻找的SVG图片是http://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg
,可以通过点击上面的维基百科页面找到它。
修复,让我在我认为是你想要的节点上的企鹅。我想其他图像也有同样的问题。
您的实际图片很大,因此您只会看到左上角是空白的。向SVG图像文件添加viewBox可能是您需要尝试获取viewBox的正确值所需的。
答案 1 :(得分:0)
如果没有看到完整的代码,这只是猜测:
SVG Image with <image> tags does not show up in Firefox 16 when referred through GWT application
基本上,firefox不喜欢使用xlink:href元素,其中为另一个资源发出新请求。可能值得调查。