javascript - 有没有办法用 Js 绘制 svg 元素的轮廓或轮廓？

Question

有没有办法通过将 SVG 捕捉到其他 JavaScript 库来绘制 svg 元素的轮廓或轮廓？

Answer 1

创建一个比您想要的 SVG 尺寸稍大的 Canvas 。

用您想要轮廓线的颜色在其上绘制一个矩形。设置 globalCompositeOperation = "destination-atop"，然后在顶部绘制 SVG。现在您有了 SVG 的蒙版。

然后在另一个 Canvas 上以您想要的轮廓半径绘制一个圆圈。然后在顶部绘制 SVG，您就得到了一个轮廓 SVG。

如果您有半透明部件，您将需要做一些额外的工作。但这是一般原则。

// the SVG image to outline
svg = `<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="328" height="208" id="testSVG" ><defs></defs><path d="M278.5,30Q317.3,35.8,319,72.5Q288.3,93.3,262.5,65Q242.8,77.3,252,134.5Q261.3,160.3,283.5,149C317.8,121.6,257.5,130.8,271,98.5Q270.9,95.6,319.5,97Q322.4,96.9,321,160.5Q297.8,189.3,261.5,185Q237.3,181.3,226,156.5Q214,135.5,218,86.5Q227.8,44.8,242.5,38Q264.5,26,278.5,30Z
M42.5,30Q89.3,27.3,93,67.5C63.5,99,51.5,42,38,67.5Q95.5,95,97,126.5Q99.3,175.3,60.5,185Q32,187,21.5,177Q4.8,157.3,5,142.5C34.9,102.2,48.5,175.5,65,145.5C75.9,118.3,8.4,111.6,9,86.5Q4.3,36.8,42.5,30Z
M102.5,33Q133.5,33,135,33.5L157,136L179,33.5Q179,32.5,211,33.5Q173.8,191.3,173.5,182Q139,182.5,139,181.5Q99.9,33.6,102.5,33Z
"  fill="rgba(255,134,0,1.000)" fill-rule="evenodd" stroke="transparent" stroke-width="1" stroke-opacity="1" ></path></svg>`

// creates image with 2dContext attached
var createImage= function(w,h){
    var image = document.createElement("canvas");  
    image.width = w;
    image.height =h; 
    image.ctx = image.getContext("2d");
    return image;
}  
// Setting width is in pixels
var outlineWidth = 8;
var outlineColour = "Yellow";

// Function to outline SVG image. Or any image 
function outline(){  // as this is the onload this is the image to outline
    var w = this.width + outlineWidth*2+2;  // get the new width and height
    var h = this.height + outlineWidth*2+2;
    var mask = createImage(w,h); // create the mask image
    mask.ctx.clearRect(0,0,w,h);  // Clear is You must do this for destination-atop to work
    mask.ctx.fillStyle = outlineColour;  // 
    mask.ctx.fillRect(0,0,w,h);  // fill the image with the outline colour
    mask.ctx.globalCompositeOperation = "destination-atop";  // now set so only pixels drawn on will show background colour
    mask.ctx.drawImage(this,outlineWidth+1,outlineWidth+1);
    // we now have a mask of the SVG in the colour we want
  
    var outlined = createImage(w,h);   // create the final image
    // draw an outline by drawing a circle with the mask
    for(var i = 0; i < Math.PI*2; i+= (Math.PI*2)/(outlineWidth*2)){
        var x = Math.cos(i)*outlineWidth+outlineWidth+1;
        var y = Math.sin(i)*outlineWidth+outlineWidth+1;
        outlined.ctx.drawImage(mask,x,y);
    }
    // draw the SVG in the center of the outline
    outlined.ctx.drawImage(this,outlineWidth*2+1,outlineWidth*2+1);    
     // done so show the world
    var output = document.getElementById("resultImage");
    output.src = outlined.toDataURL();
    
}

var svgImage = new Image();
svgImage.onload = outline;
svgImage.src = "data:image/svg+xml;base64,"+btoa(svg);
var input = document.getElementById("inImg");
input.src = "data:image/svg+xml;base64,"+btoa(svg);

SVG outlined<br>Outlined image will appear below the original<br>
<img id="inImg">
<img id="resultImage">