相关疑难解决方法(0)

试图创建一个 svg 背景图案，但是：

当我不使用填充时可以，当使用颜色名称时：color: red;可以，但是如果使用十六进制颜色，则不会显示任何内容。

这里是代码：

好的：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='red' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

不好：

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='#FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

还可以查看 jsfiddle：

https://jsfiddle.net/vajnabotond/r362xdjn/19/

我的svgs在css中指定如下:

background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15"><g fill="none" fill-rule="evenodd" stroke="#00174a"><path d="M11 1l7 6.533L11.07 14M17.5 7.5H.5"/></g></svg>')

这适用于所有浏览器,但由于chrome 72此功能不再适用于chrome.我找不到任何关于属性data:image前缀的可靠文档background.或谷歌有关此更改的更新.

我知道我可以指定一个svg的路径,但我正在使用这种技术来重现不同颜色的svgs,这是我需要实现的方法.

我正在使用WebView在我的Android应用中显示SVG图像.它在Chrome 71上没有任何问题,但自从更新到Chrome 72后,我收到了一个解析器错误:

error on line 21 at column 19: AttValue: ' expected

第21行是这一行,第19列是#:

<g clip-path="url(#clip1)">

如果我跳过那一行,我在下一行得到同样的错误,抱怨#efefef:

<g fill-opacity="1" fill-rule="evenodd" stroke="none" fill="#efefef">

它似乎#导致了Chrome 72的一些问题.我该如何解决这个问题？

它似乎是Chrome中的一个错误.可能与此问题有关.

我加载与SVG webview.loadData(svg, "image/svg+xml", "utf-8"),如果我编码#与%23它的工作.但为什么我必须自己编码数据呢？

SVG 单独工作，但不能与标签的src属性内联<img>。

<img src='data:image/svg+xml;charset=utf-8,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 9.14453C0 9.60156 0.175781 10.0234 0.492188 10.3398L7.91016 17.7578C8.57812 18.4258 9.66797 18.4258 10.3008 17.7578L17.4727 10.5859C18.1406 9.95312 18.1406 8.86328 17.4727 8.19531L10.0547 0.777344C9.73828 0.460938 9.31641 0.25 8.85938 0.25H1.6875C0.738281 0.25 0 1.02344 0 1.9375V9.14453ZM3.9375 2.5C4.85156 2.5 5.625 3.27344 5.625 4.1875C5.625 5.13672 4.85156 5.875 3.9375 5.875C2.98828 5.875 2.25 5.13672 2.25 4.1875C2.25 3.27344 2.98828 2.5 3.9375 2.5Z" fill="#D40026"/></svg>'/>

我使用SASS产生我的CSS，我试图创建一个点重复模式，以模拟border-bottom在abbr使用背景图像的图像SVG标签。

我已经进行了深入搜索，但找不到解决方案，因为我正在使用 sass 使用父类修改特定站点口音的填充颜色。

填充<rect ... />位于 SVG 中的元素上。

这是我下面的sass...

ABBR {
  text-decoration: none !important;
  cursor: default !important;
  border: none;
  position: relative;

  &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: {
      image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$body-color}" /></svg>');
      repeat: repeat;
    }

    @include accent-colors {
      background: {
        image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="2" height="1"><rect width="1" height="1" fill="#{$accent-color}" /></svg>') !important;
      }
    }
  }
}

这是我编译的 …