为什么svg image属性未显示在img标签中?

时间:2019-05-12 22:50:06

标签: javascript php css image svg

我想做的是在Google地图上显示带有圆角(在圆内)的正方形图像作为标记。我的问题是这不起作用... 我在JS中有以下代码:

var frame = [
  '<?xml version="1.0" standalone="no"?>',
  '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
  '<svg width="54px" height="54px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">',
    '<defs>',
      '<rect id="rect" x="2" y="2" width="50px" height="50px" rx="50%"/>',
      '<clipPath id="clip">',
        '<use xlink:href="#rect"/>',
      '</clipPath>',
    '</defs>',
    '<use xlink:href="#rect" stroke-width="2" stroke="#9c0001"/>',
    '<image xlink:href="{{ url }}"  width="54px" height="54px" clip-path="url(#clip)"/>',
  '</svg>'
].join('\n');
var svg = frame.replace('{{ url }}', Marker.icon);
var avatar = {url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg), scaledSize: new google.maps.Size(54, 54), optimized:false };

Maps.setIcon(avatar);

{{url}}例如https://www.androidpolice.com/2019/04/08/scoped-storage-in-android-q-beta-2-limits-how-apps-can-access-files/#1。 使用此代码,我得到了地图上的圆和边界,但其中没有图像...如果使用检查器,请复制img的src属性并将其粘贴到地址栏中,或者如果我从svg中打开保存的代码文件,它可以正确显示图像(圆圈,边框和圆圈内的图像)。

data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%2254px%22%20height%3D%2254px%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%3Cdefs%3E%0A%3Crect%20id%3D%22rect%22%20x%3D%222%22%20y%3D%222%22%20width%3D%2250px%22%20height%3D%2250px%22%20rx%3D%2250%25%22%2F%3E%0A%3CclipPath%20id%3D%22clip%22%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23rect%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23rect%22%20stroke-width%3D%222%22%20stroke%3D%22%239c0001%22%2F%3E%0A%3Cimage%20xlink%3Ahref%3D%22http%3A%2F%2F127.0.0.1%2Favatar.jpg%22%20%20width%3D%2254px%22%20height%3D%2254px%22%20clip-path%3D%22url(%23clip)%22%2F%3E%0A%3C%2Fsvg%3E

知道为什么吗?是否有任何解决方法/修复程序?通过CSS / JS做我想要的其他任何方式(从方形图像制作圆圈图像)吗?谢谢。

0 个答案:

没有答案