简体   繁体   中英

d3 svg clippath with path

Trying to use a complex clippath derived from a path to cut a circle in an svg drawing. It works when I use a shape, but not the path.

I'm wondering if it is because the path is pre-designed according to a separate coordinate space?

Relevant code follows:

<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中手动重新绘制路径来解决此问题。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM