Question

自动生成地图，并在地图上生成地图标记。在HTML代码中生成的map-marker看起来像：

    <image id="Geometry_Point" cx="250.63056092843334" 
cy="233.0863010581852" r="1" preserveAspectRatio="none" x="235" y="196"
 width="32" height="37" xlink:href="http://icons.iconarchive.com/icons
/paomedia/small-n-flat/24/map-marker-icon.png" style="opacity: 1" 
fill="#000000" fill-opacity="1" stroke="#000000" stroke-opacity="1" 
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

标记图标图片的位置为xlink:href="link"

是否可以使用带有指向标记的新链接的CSS覆盖它？

Answer 1

CSS无法更改元素的属性，请使用js。 CSS仅适用于视觉效果。

document.getElementById('Geometry_Point').setAttribute('xlink:href', 'http://google.com')

确保没有JS已经使用该值并使用缓存。

Answer 2

使用::after css伪选择器创建图层像这样：的CSS：

#Geometry_Point::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #f00; /*or your variant*/
}

覆盖自动生成的图标

2 个答案: