gpt4 book ai didi

javascript - Leaflet.js map 中的 SVG 图标

转载 作者:行者123 更新时间:2023-12-04 20:31:31 25 4
gpt4 key购买 nike

我有一个有效的传单 map ,但无法使用 encodeURI 传入 SVG 图标(没有尝试 encodeURIComponent,因为我不确定这是问题所在)。 gist我正在使用显示如何传入 SVG 矩形,这很有效:

<svg xmlns='http://www.w3.org/2000/svg'> <rect> x='0' y='0' width='20' height='10' fill='#000000' </rect> </svg> 

但是,即使代码有效,在 SVGOMG 中进行了优化,并且在 SVG linters(如 SVG Viewer)上正确显示,我也无法成功传递圆圈或路径。例如,一颗星星。
<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>

一个 example is on CodePen相关的代码行是:
var svgicon ="<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>"

var url = encodeURI("data:image/svg+xml," + svgicon).replace(/%20/g, ' ').replace(/%22/g, "'").replace(/%3C/g,'<').replace(/%3E/g,'>');
console.log(url);

您可以在控制台中看到 SVG 路径。
"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>"

什么都没有出现,也没有错误消息。有时,会出现损坏的图像链接。

最佳答案

您可以在浏览器中显示该 svg 吗?我认为 SVG 路径的格式不正确。

您定义一个 50(px) x 50(px) 的 svg Canvas 。

<path d="
M2,111
h300
l-242.7,176.3
92.7,-285.3
92.7,285.3
Z
" fill="#000"/>

您在 Canvas 外部的 2,111 处以绝对 ( M ) 声明开始路径。随后是右侧的相对 ( h ) 水平线 300。
然后相对 ( l )ines -242.7,176.3 92.7,-285.3 92.7,285.3 在你 clo( Z )e 之前。

如果我将 Canvas 设置为 1000 * 1000,我会在浏览器中看到这个图标。这是你想看到的吗?

enter image description here

我在 LeafletJS 中这样绘制:
let achenSvgString = "<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'><path d='M2,111 h300 l-242.7,176.3 92.7,-285.3 92.7,285.3 z' fill='#000000'/></svg>"
let myIconUrl = encodeURI("data:image/svg+xml," + achenSvgString).replace('#','%23');

// L.icon({
// iconUrl: myIconUrl,
// iconSize: 40
// });

我没有调整大小,因为我只是将它敲入了一段工作代码,但你可以看到这里绘制的星星......

enter image description here

关于javascript - Leaflet.js map 中的 SVG 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45110081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com