我添加了我的j查询代码，它改变了SVG的hover g标签上的索引。 它在Chrome中运行良好，但在Firefox中不行
在chrome中打开此代码，然后运行，您会看到每条线都会在其他2行
之上发生变化但它不适用于Firefox。请帮忙
$('.bus').hover(function(){
this.parentNode.appendChild(this);
});line{stroke: #ccc;stroke-dasharray: 0;stroke-width: 5;}
.color1:hover line, .color1.active line {stroke:#913ccd; pointer-events:all;}
.color1:hover .trip_start_icon path, .color1.active .trip_start_icon path{stroke:#913ccd;stroke-width: 3; fill:#C9CCD6; pointer-events:all; }
.color1 .trip_start_icon path, .color1.active .trip_start_icon path{fill:#913ccd; pointer-events:all;}
.color1:hover circle, .color1.active circle{fill:#913ccd; pointer-events:all;}
.color2:hover line {stroke:#f15f74;}
.color2:hover .trip_start_icon path{stroke:#f15f74;stroke-width: 3; fill:#C9CCD6;}
.color2 .trip_start_icon path{fill:#f15f74;}
.color2:hover circle{fill:#f15f74;}
.color3:hover line {stroke:#f76d3c;}
.color3:hover .trip_start_icon path{stroke:#f76d3c;stroke-width: 3; fill:#C9CCD6;}
.color3 .trip_start_icon path{fill:#f76d3c;}
.color3:hover circle{fill:#f76d3c;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>
答案 0 :(得分：1)
请检查是否仍有任何问题，然后告诉我
line{stroke: #ccc;stroke-dasharray: 0;stroke-width: 1;}
.color1:hover line, .color1.active line {stroke:#913ccd; pointer-events:all;}
.color1:hover .trip_start_icon path, .color1.active .trip_start_icon path{stroke:#913ccd;stroke-width: 3; fill:#C9CCD6; pointer-events:all; }
.color1 .trip_start_icon path, .color1.active .trip_start_icon path{fill:#913ccd; pointer-events:all;}
.color1:hover circle, .color1.active circle{fill:#913ccd; pointer-events:all;}
.color2:hover line {stroke:#f15f74;}
.color2:hover .trip_start_icon path{stroke:#f15f74;stroke-width: 3; fill:#C9CCD6;}
.color2 .trip_start_icon path{fill:#f15f74;}
.color2:hover circle{fill:#f15f74;}
.color3:hover line {stroke:#f76d3c;}
.color3:hover .trip_start_icon path{stroke:#f76d3c;stroke-width: 3; fill:#C9CCD6;}
.color3 .trip_start_icon path{fill:#f76d3c;}
.color3:hover circle{fill:#f76d3c;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>
答案 1 :(得分：1)
这是我的解决方案。我已将这些线条移到他们自己的小组中。这样，它们可以在DOM中移动，而不会影响trip_start_icon元素上的鼠标事件。
但是现在线条不再是悬停元素的子元素，我们必须通过添加和删除类来模拟悬停状态＆＃34; active＆＃34;来自相应的线组。
$('.trip_start_icon').mouseenter(function(){
var busId = $(this).closest(".bus").attr("id");
var lineGroup = $(".lines."+busId);
lineGroup.addClass("active");
lineGroup.parent().append(lineGroup);
});
$('.trip_start_icon').mouseleave(function(){
var busId = $(this).closest(".bus").attr("id");
$(".lines."+busId).removeClass("active");
});line {stroke: #ccc;stroke-dasharray: 0; stroke-width: 5;}
.color1 .trip_start_icon path {fill:#913ccd;}
.color1:hover .trip_start_icon path {stroke:#913ccd; stroke-width: 3; fill:#C9CCD6; }
.line1.active line {stroke:#913ccd;}
.line1.active circle{fill:#913ccd;}
.color2 .trip_start_icon path {fill:#f15f74;}
.color2:hover .trip_start_icon path {stroke:#f15f74; stroke-width: 3; fill:#C9CCD6;}
.line2.active line {stroke:#f15f74;}
.line2.active circle{fill:#f15f74;}
.color3 .trip_start_icon path {fill:#f76d3c;}
.color3:hover .trip_start_icon path {stroke:#f76d3c; stroke-width: 3; fill:#C9CCD6;}
.line3.active line {stroke:#f76d3c;}
.line3.active circle{fill:#f76d3c;}<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
</g>
<g class="line1 lines">
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
</g>
<g class="line2 lines">
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
</g>
<g class="line3 lines">
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>
*请注意，您需要使用jQuery v3或更高版本才能使addClass()正常使用SVG元素。
答案 2 :(得分：0)
$('.bus').mouseenter(function(){
$(this).addClass('hover');
this.parentNode.appendChild(this);
});
$('.bus').mouseleave(function(){
$(this).removeClass('hover');
});line{stroke: #ccc;stroke-dasharray: 0;stroke-width: 5;}
.color1.hover line {stroke:#913ccd;}
.color1.hover .trip_start_icon path{stroke:#913ccd;stroke-width: 3; fill:#C9CCD6;}
.color1 .trip_start_icon path{fill:#913ccd;}
.color1.hover circle{fill:#913ccd;}
.color2.hover line {stroke:#f15f74;}
.color2.hover .trip_start_icon path{stroke:#f15f74;stroke-width: 3; fill:#C9CCD6;}
.color2 .trip_start_icon path{fill:#f15f74;}
.color2.hover circle{fill:#f15f74;}
.color3.hover line {stroke:#f76d3c;}
.color3.hover .trip_start_icon path{stroke:#f76d3c;stroke-width: 3; fill:#C9CCD6;}
.color3 .trip_start_icon path{fill:#f76d3c;}
.color3.hover circle{fill:#f76d3c;}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<svg id="mainSVG" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" width="100%" height="500">
<g class="grid x-grid" id="xGrid">
<line x1="10%" x2="10%" y1="0" y2="100%"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line y1="0" y2="100%" x1="90%" x2="90%"></line>
</g>
<g class="line-left"></g>
<g class="line-right"></g>
<g class="labels labels-left y-labels"></g>
<g class="labels labels-right y-labels"></g>
<g id="line1" class="grid bus color1">
<svg class="trip_start_icon" x="6%" y="15" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="30" x2="90%" y2="90"></line>
<circle cx="90%" cy="90" r="4" stroke="none" fill="none" />
<line x1="90%" y1="90" x2="10%" y2="180"></line>
<circle cx="10%" cy="180" r="4" stroke="none" fill="none" />
<line x1="10%" y1="180" x2="90%" y2="270"></line>
<circle cx="90%" cy="270" r="4" stroke="none" fill="none" />
<line x1="90%" y1="270" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="450"></line>
<circle cx="90%" cy="450" r="4" stroke="none" fill="none" />
<line x1="90%" y1="450" x2="10%" y2="540"></line>
<circle cx="10%" cy="540" r="4" stroke="none" fill="none" />
</g>
<g id="line2" class="grid bus color2">
<svg class="trip_start_icon" x="6%" y="75" width="30" height="30">
<g id="Layer_1">
<path id="path2" d="M19.678,22c-4.045,4.044-10.601,4.044-14.646,0 c-4.042-4.045-4.042-10.602,0-14.644c4.045-4.045,10.601-4.045,14.646,0l7.324,7.321L19.678,22z" fill="#5C9741" stroke="none" stroke-width="3" clip-rule="evenodd" fill-rule="evenodd" />
</g>
</svg>
<line x1="10%" y1="90" x2="90%" y2="150"></line>
<circle cx="90%" cy="150" r="4" stroke="none" fill="none" />
<line x1="90%" y1="150" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="330"></line>
<circle cx="90%" cy="330" r="4" stroke="none" fill="none" />
<line x1="90%" y1="330" x2="10%" y2="420"></line>
<circle cx="10%" cy="420" r="4" stroke="none" fill="none" />
<line x1="10%" y1="420" x2="90%" y2="510"></line>
<circle cx="90%" cy="510" r="4" stroke="none" fill="none" />
<line x1="90%" y1="510" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
</g>
<g id="line3" class="grid bus color3">
<svg class="trip_start_icon" x="90%" y="45" width="30" height="30">
<g id="Layer_1">
<path fill="#5C9741" d="M0,15.355l7.324-7.321c4.045-4.045,10.602-4.045,14.646,0c4.041,4.042,4.041,10.599,0,14.644 c-4.045,4.045-10.602,4.045-14.646,0L0,15.355z"></path>
</g>
</svg>
<line x1="90%" y1="60" x2="10%" y2="120"></line>
<circle cx="10%" cy="120" r="4" stroke="none" fill="none" />
<line x1="10%" y1="120" x2="90%" y2="180"></line>
<circle cx="90%" cy="180" r="4" stroke="none" fill="none" />
<line x1="90%" y1="180" x2="10%" y2="240"></line>
<circle cx="10%" cy="240" r="4" stroke="none" fill="none" />
<line x1="10%" y1="240" x2="90%" y2="300"></line>
<circle cx="90%" cy="300" r="4" stroke="none" fill="none" />
<line x1="90%" y1="300" x2="10%" y2="360"></line>
<circle cx="10%" cy="360" r="4" stroke="none" fill="none" />
<line x1="10%" y1="360" x2="90%" y2="420"></line>
<circle cx="90%" cy="420" r="4" stroke="none" fill="none" />
<line x1="90%" y1="420" x2="10%" y2="480"></line>
<circle cx="10%" cy="480" r="4" stroke="none" fill="none" />
<line x1="10%" y1="480" x2="90%" y2="540"></line>
<circle cx="90%" cy="540" r="4" stroke="none" fill="none" />
<line x1="90%" y1="540" x2="10%" y2="600"></line>
<circle cx="10%" cy="600" r="4" stroke="none" fill="none" />
<line x1="10%" y1="600" x2="90%" y2="660"></line>
<circle cx="90%" cy="660" r="4" stroke="none" fill="none" />
</g>
</svg>