例如,给定图像如上所述,我想要做的是在SVG上绘制完全相同形状的折线对象(我创建'绘图'或者我应该说基于SVG的'刷'工具,这就是为什么我使用折线使得用户可以用他的鼠标绘画,甚至可以用他或她的鼠标使用橡皮擦)。以下是我将如何实现这一目标。
通过这个过程我得到了这个结果doughnut drawin with svg polyline(现在这只是一个示例结果,它形成丑陋,因为我必须用我的手手动绘制它。但我的目的是获得与输入图像相同的形状)
但我不确定这是否是唯一的方法,甚至不确定我是否应该坚持使用SVG。有没有其他好方法来实现这一目标?或者使用canvas而不是SVG让它更容易?
这个形状可以用圆圈绘制。 使用由圆圈组成的面具制作镂空
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="405" height="401" viewBox="0 0 405 401" >
<defs>
<mask id="msk1" >
<rect width="100%" height="100%" fill="white" />
<g fill="black">
<circle cx="202" cy="200" r="40" />
<circle cx="260" cy="298" r="40" />
<circle cx="215" cy="303" r="20" />
</g>
</mask>
</defs>
<circle cx="202" cy="200" r="98" fill="black" mask="url(#msk1)" />
这假设您已经拥有SVG路径。
要绘制多边形,您需要通过M
命令拆分路径。在下一个示例中,我手动完成,但您可以动态执行此操作。这很重要,否则你会在多边形中得到一个分裂。
您还需要设置精度,即多边形点之间的距离。
请阅读我的代码中的注释。
let paths = document.querySelectorAll("#theGroup path");
let precision = 5;//how far one of other the points of the polygon are
let points = [];// the array of points
// for each path in the array of paths
paths.forEach(p=>{
// get the total length
let totalLength = p.getTotalLength();
// get the number of points for the polygon in base of the precision
let numPoints = ~~(totalLength / precision);
// calculate the segment length
let segmentLength = totalLength / numPoints;
for(let i = 0; i <= numPoints; i++ ){
let point = p.getPointAtLength(i*segmentLength);
// get the coordinates of this point and push it
points.push(point.x);
points.push(point.y);
}
})
//set the value for the points attribute of the polygon
poly.setAttributeNS(null,"points", points.join())
svg{border:1px solid; width:90vh;}
path{fill:none}
<svg viewBox="0 0 531 531">
<g id="theGroup">
<path id="donut" d="M268.64,76.066c70.065,2.632,125.154,32.347,163.73,91.372
c14.944,22.864,23.47,48.161,27.698,75.22c3.987,25.512,2.188,50.551-3.64,75.354c-4.821,20.522-13.383,39.648-24.866,57.406
c-2.003,3.099-3.899,3.396-7.365,1.548c-30.011-16.005-64.509-10.767-87.731,14.13c-6.295,6.748-9.985,15.893-15.108,23.783
c-1.548,2.384-3.508,5.256-5.938,6.189c-19.202,7.375-32.874,20.547-41.279,39.064c-1.911,4.211-4.254,5.562-8.308,5.085
c-13.198-1.554-26.507-2.515-39.562-4.873c-30.46-5.502-57.275-19.262-81.055-38.724c-28.703-23.491-49.496-52.646-61.424-88.046
c-7.479-22.198-11.34-44.892-10.42-68.225c2.042-51.761,20.944-96.305,57.854-133.023c22.272-22.156,48.427-37.859,78.3-47.183
C228.671,79.17,248.365,75.884,268.64,76.066z"/>
<path id="hole" d="M340.466,271.259c0.179-40.212-32.175-73.14-72.067-73.348
c-40.072-0.208-73.264,32.326-73.485,72.032c-0.226,40.441,32.218,73.372,72.436,73.522
C307.646,343.616,340.286,311.382,340.466,271.259z"/>
</g>
<polygon id="poly" fill="gold" points = "" />
</svg>