将Inkscape SVG嵌入svg + xml以通过CSS更改颜色

Question

我用Inkscape创建了这个SVG图标：https://codepen.io/honk007/pen/Jjoeryp

我设法将简单的图标直接嵌入HTML，这样我可以通过CSS更改颜色，如下所示：

.mydiv > circle {
    fill: #f00;
}

我试图以所有可能的方式嵌入此图标，但未显示。我可以将其嵌入base64中，但是我不能更改颜色，而我想动态更改fill: #5b4cdf;颜色。

通过这样的JS进行嵌入时：

const svg_O = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 29"><defs><filter id="a" color-interpolation-filters="sRGB"><feFlood flood-opacity=".5" flood-color="#000"/><feComposite in2="SourceGraphic" operator="in"/><feGaussianBlur stdDeviation="1"/><feOffset/><feComposite in="SourceGraphic"/></filter></defs><path d="M22 12.4a10 10 0 01-6.2 9.3c-1.2.4-3.2 3.8-3.8 4.8-.7-1-2.6-4.3-3.8-4.8A10 10 0 1122 12.4z" fill="#efefef" filter="url(#a)"/><circle cx="12" cy="12.4" r="7" fill="#5b4cdf"/><path d="M14.5 12.2h1L12 9l-3.5 3.2h1V15h1.8v-2.1h1.4V15h1.8z" fill="#fff"/></svg>';  
const svgpin_O = encodeURI("data:image/svg+xml;utf-8," + svg_O).replace('#', '%23');

const icon_O = L.icon({
        iconUrl: svgpin_O,
        iconSize: [90, 101],
        iconAnchor: [45, 0]
    });

我明白了：

<img src="data:image/svg+xml;utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2029%22%3E%3Cdefs%3E%3Cfilter%20id=%22a%22%20color-interpolation-filters=%22sRGB%22%3E%3CfeFlood%20flood-opacity=%22.5%22%20flood-color=%22%23000%22/%3E%3CfeComposite%20in2=%22SourceGraphic%22%20operator=%22in%22/%3E%3CfeGaussianBlur%20stdDeviation=%221%22/%3E%3CfeOffset/%3E%3CfeComposite%20in=%22SourceGraphic%22/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d=%22M22%2012.4a10%2010%200%2001-6.2%209.3c-1.2.4-3.2%203.8-3.8%204.8-.7-1-2.6-4.3-3.8-4.8A10%2010%200%201122%2012.4z%22%20fill=%22#efefef%22%20filter=%22url(#a)%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212.4%22%20r=%227%22%20fill=%22#5b4cdf%22/%3E%3Cpath%20d=%22M14.5%2012.2h1L12%209l-3.5%203.2h1V15h1.8v-2.1h1.4V15h1.8z%22%20fill=%22#fff%22/%3E%3C/svg%3E">

并且这不会在浏览器中显示图标。

是否可以通过CSS动态地改变圆圈颜色来嵌入此Icon？

Answer 1

您只能使用一个父div类来更改任何SVG颜色。

检查您的更新片段在这里：https://codepen.io/hardiksolanki/pen/eYmQepM

.svg_icon svg circle{
  fill: #f00 !important;
}

Answer 2

我设法根据此解决它：

var iconSettings = {
        mapIconUrl: '<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149 178"><path fill="{mapIconColor}" stroke="#FFF" stroke-width="6" stroke-miterlimit="10" d="M126 23l-6-6A69 69 0 0 0 74 1a69 69 0 0 0-51 22A70 70 0 0 0 1 74c0 21 7 38 22 52l43 47c6 6 11 6 16 0l48-51c12-13 18-29 18-48 0-20-8-37-22-51z"/><circle fill="{mapIconColorInnerCircle}" cx="74" cy="75" r="61"/><circle fill="#FFF" cx="74" cy="75" r="{pinInnerCircleRadius}"/></svg>',
        mapIconColor: 'blue',
        mapIconColorInnerCircle: '#fff',
        pinInnerCircleRadius:48
    };


// icon normal state
var divIcon = L.divIcon({
    className: "leaflet-data-marker",
  html: L.Util.template(iconSettings.mapIconUrl, iconSettings), //.replace('#','%23'),
  iconAnchor  : [12, 32],
  iconSize    : [25, 30],
  popupAnchor : [0, -28]
});

https://codepen.io/honk007/pen/WNbYXad