如何在内嵌SVG(Google地图)中使用颜色代码 [英] How do I use color code in inline svgs (google maps)
本文介绍了如何在内嵌SVG(Google地图)中使用颜色代码的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在JavaScript的google maps API中将自定义标记显示为.svg.
I am displaying a custom marker as .svg in google maps API in JavaScript.
似乎Google Maps api不喜欢在代码中使用#00492C
. fill="#0000"
不起作用,只有fill="green"
可以起作用.
It seems like that the google maps api does not like using #00492C
in code. fill="#0000"
does not work, only fill="green"
would work.
var icon: {
url: 'data:image/svg+xml;utf-8, \
<svg width="30" height="48" viewBox="1 -10 60 78" xmlns="http://www.w3.org/2000/svg"> \
<path fill="#00492C" d="M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z"></path> \
</svg>'
}
我希望我的标记物会变成深绿色,但是它不再出现了.
I am expecting my marker getting dark green but instead it just does not appear anymore.
推荐答案
You need to escape the # character as that's reserved for the start of a fragment identifier in a URL. Replace all occurances of # with %23
icon: {
url: 'data:image/svg+xml;utf-8, \
<svg width="30" height="48" viewBox="1 -10 60 78" xmlns="http://www.w3.org/2000/svg"> \
<path fill="%2300492C" d="M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z"></path> \
</svg>'
}
代码段:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -33,
lng: 151
}
});
var beachMarker = new google.maps.Marker({
position: {
lat: -33.890,
lng: 151.274
},
map: map,
icon: {
url: 'data:image/svg+xml;utf-8, \
<svg width="30" height="48" viewBox="1 -10 60 78" xmlns="http://www.w3.org/2000/svg"> \
<path fill="%2300492C" d="M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z"></path> \
</svg>'
}
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
这篇关于如何在内嵌SVG(Google地图)中使用颜色代码的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文