我想做的是在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做我想要的其他任何方式(从方形图像制作圆圈图像)吗?谢谢。