D3 SVG剪贴路径与路径
d3 svg clippath with path
尝试使用从路径派生的复杂剪贴路径在svg绘图中剪切圆。当我使用形状时,它可以工作,但不包括路径。
我想知道这是不是因为路径是根据一个单独的坐标空间预先设计的?
相关代码如下:
<svg id="svg" preserveAspectRatio="xMinYMin slice" class="my-svg" viewBox="0 0 240 300" >
<g id="layer1" fill-rule="nonzero" transform="translate(-339.51327,-424.53778)" stroke="#FFF" stroke-dasharray="none" stroke-miterlimit="4">
....
var layer = d3.select('#layer1');
var montgomery = layer.append('clipPath')
.attr('id', 'countyclip')
.append("path")
.attr('d', "m526.78,513.26,17.229,12.71-4.3009,3.2763-1.7313-1.6736-2.5526,2.6951,1.5815,1.7612-2.0631,1.9309-3.1384-4.1418-3.7054-1.6018-2.923-3.3335-0.27731-0.55232-0.0879-0.16841-3.3225-2.1294-2.0168-0.1403,5.64-9.9378,1.6689,1.3056");
svg.append('circle')
.attr('class', 'hospital')
.attr('id', 'Norristown')
.attr("clip-path", "url(#countyclip)")
.attr('cx', 195)
.attr('cy', 102)
.attr('r', 20 )
.attr('fill', '#f1a340')
.attr('stroke', '#d95f0e')
.attr('stroke-width', 0.5);
仍然不知道为什么使用预先绘制的路径不起作用,但通过在inkscape中手工重新绘制路径来解决这个问题。
相关文章:
- 使用onclick绘制SVG路径
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- 如何设置SVG路径的样式以拍摄图像
- Html5-使用SVG路径绘制的组织层次结构在左手边被剪裁
- SVG路径命中测试
- 我如何才能让这个svg圆圈出现在我的d3路径上方,而不是下方
- 更快的SVG路径操作
- 以编程方式确定由 SVG 路径生成的形状
- 将 SVG 路径雕刻成矩形,在矩形中留下一个“孔”
- 使用正则表达式提取 svg 路径
- 如何在 JavaScript 中计算 SVG 路径的椭圆路径坐标
- SVG 路径未显示
- svg路径动画整个路径
- 使用Javascript获取SVG路径的绝对坐标
- 如何以类似于vivus.js的样式设置SVG填充和路径的动画
- 使用Snap.svg的带有箭头标记的动画路径
- 改变<svg>对象's路径
- 画布的SVG路径
- jQuery 在文本路径 svg 元素方面存在问题
- 调整多边形点路径(svg)内的图像大小并使其不被剪裁