Question

我可以创建我的自定义模式，here is an example

我已经完成了示例中针对自定义模式所提到的相同步骤。我只更改了d元素（与svg路径有关）。但是事情没有按我预期的进行。

任何帮助将是感激的。

这是代码：

   var mapCenter = new L.LatLng(50.68, -120.34);

    var baseLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });

    var _map = new L.Map("map", {
        center: mapCenter,
        zoom: 14,
        layers: [baseLayer]
    });

    var shape = new L.PatternPath({
        d: 'M10 0 L7 20 L25 20 Z',
        fill: true
    });

    var pattern = new L.Pattern({width:50, height:50});
    pattern.addShape(shape);
    pattern.addTo(_map);

    var circle = new L.Circle(mapCenter, 400.0, {
        fillPattern: pattern,
        fillOpacity: 1.0});
    circle.addTo(_map);

我只更改了( d: 'M10 0 L7 20 L25 20 Z') 到('m206.38471,149.50017a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828')

任何帮助都将成为感激之情

Answer 1

您可以通过使svg路径的x和y位置与样本的x和y位置相同来修复它。我已经将两个路径放在相同的svg文件中，并使用online editor打开了它。如您在此屏幕快照中所见，示例路径位于左上角，但路径位于中间。设置其位置与样本值相同后：6px，-1px模式显示如下：

使用的路径：m8.278722,2.394142a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.05738,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 3.0574,0a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28828a1.52869,1.64413 0 0 1 0,3.28827a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 -3.05738,0a1.52869,1.64413 0 0 1 -3.0574,0a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28828a1.52869,1.64413 0 0 1 0,-3.28827a1.52869,1.64413 0 0 1 0,-3.28828

如果按比例缩小路径，则显示如下：

使用的路径：m7.27872,1.318623a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057389,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 1.057396,0a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137245a0.528694,0.568619 0 0 1 0,1.137241a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 -1.057389,0a0.528694,0.568619 0 0 1 -1.057396,0a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137245a0.528694,0.568619 0 0 1 0,-1.137241a0.528694,0.568619 0 0 1 0,-1.137245

传单模式。试图添加路径模式不起作用

1 个答案: