inline-svg

问题 I am displaying a custom marker as .svg in google maps API in JavaScript. 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

问题 I am displaying a custom marker as .svg in google maps API in JavaScript. 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

问题 I have the following inline SVG defined as a background-image in my css. div { border: 1px solid black; background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>"); background-repeat: no-repeat; background-position: center center; background-size: 100%; } It works fine in Chrome, Firefox and Edge, but fails in Internet Explorer 11.

问题 I'm building an icon solution using SVG, where parts of icons need to be reusable. There are a few different <svg /> elements inline in my HTML document, and the <use /> element works perfectly for reusing shapes – rects, paths and so on, even between svg elements. However, reusing other definitions, like <radialGradient /> doesn't work for me. When the gradient is defined within a <defs /> element in the same <svg /> element, it works as expected, but not when the gradient is defined in