Вставьте Inkscape SVG как SVG + xml, чтобы изменить цвет с помощью CSS - PullRequest
Новая
       51

Вставьте Inkscape SVG как SVG + xml, чтобы изменить цвет с помощью CSS

2 голосов
/ 20 января 2020

Я создал этот SVG Icon с Inkscape: 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?

Ответы [ 2 ]

1 голос
/ 20 января 2020

Вы можете изменить любой цвет SVG, используя только один родительский класс div.

Убедитесь, что фрагмент обновления здесь: https://codepen.io/hardiksolanki/pen/eYmQepM

.svg_icon svg circle{
  fill: #f00 !important;
}
0 голосов
/ 20 января 2020

Мне удалось решить это на основе этого: 

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

...