Javascript 如何使用svg剪裁传单geoJSON层<;克利帕斯>;
根据,我现在可以从本地geoJSON文件加载并显示所有多边形。我计划使用自定义轮廓路径剪裁新创建的SVG层。我从clipPath的子代开始创建一个圆,该圆是通过传单的L.circle创建的,以避免坐标投影。基于官方示例的主要代码如下:Javascript 如何使用svg剪裁传单geoJSON层<;克利帕斯>;,javascript,svg,leaflet,Javascript,Svg,Leaflet,根据,我现在可以从本地geoJSON文件加载并显示所有多边形。我计划使用自定义轮廓路径剪裁新创建的SVG层。我从clipPath的子代开始创建一个圆,该圆是通过传单的L.circle创建的,以避免坐标投影。基于官方示例的主要代码如下: // Create a circle outline var clipcircle = new L.circle([34.5, -95.5], {radius: 300000, className: 'outline'}).addTo(map); // Creat
// Create a circle outline
var clipcircle = new L.circle([34.5, -95.5], {radius: 300000, className: 'outline'}).addTo(map);
// Create <defs> and <clippath> elements using jquery
$('svg').prepend('<defs><clipPath id="myclip"></clipPath></defs>');
// Move the <path> element of clipcircle from <g> to <clipPath>
$('path.outline').appendTo('#myclip');
// Add CSS clip-path attribute to all svg groups
$('g').css('clip-path', 'url(#myclip)');
// load and show polygons from geoJSON
var geojson = L.geoJSON(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.fitBounds(geojson.getBounds());
//创建一个圆形轮廓
var clipcircle=newl.circle([34.5,-95.5],{radius:300000,类名:'outline'});
//使用jquery创建和编辑元素
$('svg')。前缀(“”);
//将clipcircle的元素从移动到
$('path.outline').appendTo('myclip');
//将CSS片段路径属性添加到所有svg组
$('g').css('clip-path','url(#myclip'));
//从geoJSON加载和显示多边形
var geojson=L.geojson(statesData{
风格:风格,
onEachFeature:onEachFeature
}).addTo(地图);
fitBounds(geojson.getBounds());
代码按预期工作,但是clipPath不工作。预期仅显示圆内的区域,但页面上仍会显示除圆以外的所有多边形,如下图所示:
问题在于,在创建clipPath新元素时,jquery将元素名称小写为(),因为html标记不应区分大小写(但clipPath似乎确实区分大小写) 要克服这一问题,您需要恢复到本机DOM操作,选择svg并使用CreateElements创建元素:
var svg = document.getElementsByTagName('svg')[0]
//Create a new element of clipPath
var clipPathChild = document.createElementNS('http://www.w3.org/2000/svg', "clipPath");
//set an ID (I went lazy and continued with jquery)
$(clipPathChild).attr('id', 'myclip')
//append new node to the svg
svg.appendChild(clipPathChild);
//the "outline" class was added previously to the geojson we want to use as mask
// add the outline to clip the new node just created
$('path.outline').appendTo('#myclip');
//set the ID of the clip-path to the main feature to clip
$('path').attr('clip-path', 'url(#myclip)');
这个解决方案对我来说很有效,因为您的代码在理论上是正确的,它失败的原因是在创建新元素时对jquery进行了简单的小写转换