img 标签中使用svg,在Chrome中显示失败

Question

img 标签中使用svg,在Chrome中显示失败

发布于
2019-03-20

在不同版本Chrome上svg的颜色设置为十六进制颜色值会显示失败,设置为颜色名显示正常,不知道什么原因

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="200" height="100" fill="#4CAF50"/>
  <text fill="#FF0000" x="100" y="70" text-anchor="middle" alignment-baseline="central" font-size="21" font-family="Verdana, Geneva, sans-serif">红</text>
  <text fill="red" x="200" y="70" text-anchor="middle" alignment-baseline="central" font-size="21" font-family="Verdana, Geneva, sans-serif">红</text>
</svg>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="50" y="20" width="100" height="100" fill="#FF0000"/></svg>'>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="50" y="20" width="100" height="100" fill="red"/></svg>'>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="50" y="20" width="100" height="100" style="fill:red"/><text fill="blak"  x="100" y="70" text-anchor="middle" alignment-baseline="central" font-size="21" font-family="Verdana, Geneva, sans-serif">A</text></svg>'>
<img src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><text fill="#FF0000" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="21">系</text></svg>'>
    </body>
</html>

在chrome 69.0.3497.100 版本中显示正常
图片描述