openlayers中如何使用svg作为图标，并能够对其变换颜色。
|
1 2 3 4 5 6 7 8 |
let point1_style = new ol.style.Style({//预测点 image: new ol.style.Icon({ color: 'red', src: 'images/home-outline.svg', fill: new ol.style.Fill({ color: 'red', }) }) |
如何变换颜色呢？或者说我定义的颜色？
下面是我的svg全部内容：
|
1 |
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1625461157551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1077" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><g id="831220218805300"><path d="M514.4 112.2c5.2 0 10.3 1.8 14.3 5.2l321.4 309.2v462.9c0 12.3-10 22.2-22.3 22.2H662.3V743.9c0-26.9-10.5-52.3-29.6-71.3-19.1-19.1-44.4-29.5-71.4-29.5h-99.1c-27 0-52.3 10.6-71.3 29.7s-29.5 44.4-29.5 71.4v167.6H201c-8 0-13.3-4.1-15.8-6.6-2.4-2.4-6.5-7.7-6.5-15.8V422.7l321.2-305c4-3.5 9.2-5.5 14.5-5.5m0-50c-17.4 0-34.7 6.2-48.5 18.7L74 453.1c-14.7 13.5-15.7 36.4-2.2 51.1 7.1 7.8 16.9 11.7 26.6 11.7 8.5 0 17.1-3 23.9-9.1l6.2-5.9v388.4c0 39.9 32.3 72.4 72.2 72.4h210.5V744c0-28.1 22.7-50.9 50.9-51h99.1c28.1 0 50.9 22.8 50.9 50.9V961.7h215.4c39.9 0 72.3-32.4 72.3-72.3V505.7c7.7 7 16.9 10.3 25.9 10.3 9.8 0 19.4-4 26.3-11.8 13.4-14.8 12.2-37.7-2.6-51.1L562.9 81c-13.7-12.5-31.1-18.8-48.5-18.8z" p-id="1078" style="fill:#ffffff;" ></path></g></svg> |
核心重点：我们的color替换的就是
path里一定要写的
style=”fill:#ffffff;”
我们外界定义的color就会替换fill中的颜色
注意：不要写成fill=”#ffffff“ 这样无法替换