当使用Javascript插入时，SVG路径不会显示
问题描述：
我试图用google地图来摆弄。 我在网上提出了一个很好的例子，它利用地图叠加而不是标记来允许更多的定制标记。 我这样做是因为我想将标记从一个svg路径动画到另一个svg路径。 问题：当我插入SVG SVG的节目，但没有路径/形状等当使用Javascript插入时，SVG路径不会显示
<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps API</title>
<style type="text/css">
.icon-container {
background-color:yellow;
width: 20px;
height: 20px;
position:absolute;
}
#icon {
position:absolute;
width:30px;
height:30px;
}
@-webkit-keyframes example {
0% {opacity: 0; width: 30px; height: 30px;}
50% {opacity: 0.5; width: 50px; height: 50px;}
100% {opacity: 1; width: 30px; height: 30px;}
}
@-webkit-keyframes example2 {
0% {opacity: 1; width: 30px; height: 30px;}
50% {opacity: 0.5; width: 15px; height: 15px;}
100% {opacity: 0; width: 0px; height: 0px;}
}
#icon.show{
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
opacity:1;
}
#icon.show{-webkit-animation-timing-function: ease-in-out;}
#icon.show.alter {
-webkit-animation-name: example2; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
}
#icon.show.hide {
-webkit-animation-name: example2; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
opacity: 0;
}
#map-canvas {
width: 700px;
height: 400px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="CustomGoogleMapMarker.js"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-31.9546781,115.852662);
var mapOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
/*
// Example standard marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
*/
overlay = new CustomMarker(
myLatlng,
map,
{
marker_id: '123'
}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"> </div>
<div>
<button type="button" id="show-button">Show</button>
<button type="button" id="active-button">Active</button>
<button type="button" id="hide-button">Hide</button>
</div>
</body>
</html>
请原谅内联CSS和JS，我只是测试，并得到这个恼火...... JS
//创建一个自定义标记
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
//extends overlay view and inherits its methods
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '20px';
div.style.height = '20px';
svg = this.svg = document.createElement('svg');
svg.version="1.1";
svg.className = 'icon-container';
svg.setAttribute("viewBox","0 0 300 300");
svg.style.height = "300px";
svg.style.width = "300px";
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute("x", "0px");
svg.setAttribute("y", "0px");
svg.setAttribute("enable-background", "new 0 0 300 300");
svg.setAttribute("xml:space", "preserve");
moveOne = this.moveOne = document.createElementNS('http://www.w3.org/2000/svg', "path");
moveOne.setAttribute("fill", "none");
moveOne.setAttribute("stroke", "#231F20");
moveOne.setAttribute("stroke-miterlimit", "10");
moveOne.setAttribute("d", "M141.674,237.632");
moveTwo = this.moveTwo = document.createElementNS('http://www.w3.org/2000/svg', "path");
moveTwo.setAttribute("fill", "none");
moveTwo.setAttribute("stroke", "#231F20");
moveTwo.setAttribute("stroke-miterlimit", "10");
moveTwo.setAttribute("d", "M47.891,113.798");
icon = this.icon = document.createElementNS('http://www.w3.org/2000/svg', "path");
icon.setAttribute('id','icon');
icon.setAttribute("d", "M201.223,100.373c0,50.655-41.954,72.492-72.28,72.492 c-48.548,0-72.28-31.951-72.28-72.492c0-39.919,32.361-72.28,72.28-72.28C168.862,28.093,201.223,60.454,201.223,100.373z");
icon.setAttribute("fill", "#000");
icon.setAttribute("stroke-miterlimit","10");
icon.style.position = "absolute";
svg.appendChild(moveOne);
svg.appendChild(moveTwo);
svg.appendChild(icon);
div.appendChild(svg);
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {;
console.log("click");
console.log(this);
this.className += " click";
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x - 10) + 'px';
div.style.top = (point.y - 20) + 'px';
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
function init(){
$('#show-button').click(function() {
console.log("show the icon");
$('#icon').addClass('show');
});
$('#active-button').click(function() {
console.log("alter the icon");
});
$('#hide-button').click(function() {
console.log("hide the icon");
});
}
$(document).ready(init);
我已经添加了2条随机移动路径的原因是因为这就是它的外观，从我的SVG图像从插画中保存的HTML，我知道它不应该是必要的，但作为一个SVG显示，但插入啊并写作svg并不认为我会试图模仿它。
我需要使用一个路径，因为我想动画一个圆点到点，就像标记越来越大。为了动画点，我不能使用图像方法，我将不得不使用路径和动画路径。
任何想法，为什么插入该风格SVG将无法正常工作？它是谷歌地图的东西/ JavaScript的东西？我应该尝试试试snap还是d3？
任何想法将是巨大的，因为我只是不明白为什么它拒绝显示路径（或任何其他形状）:)
答
我不知道如果我不小心删除了它，但有网友说我没有把NS放在我的SVG的createElement之后。他们是正确的。如果这是我意外删除的错误，如果你张贴了，我会让你知道我的愚蠢错误的剔和好点 - 非常感谢！