有没有办法用 Js 轮廓或轮廓 svg 元素?
Is there a way to contour or outline a svg element with Js?
有没有办法使用 SnapSVG 或其他 JavaScript Lib 对 svg 元素进行轮廓或轮廓绘制?
我想您正在寻找的是 strokes。
创建一个 canvas 比您想要的 SVG 大小稍大的文件。
用你想要的外线颜色在它上面画一个矩形。设置 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">
有没有办法使用 SnapSVG 或其他 JavaScript Lib 对 svg 元素进行轮廓或轮廓绘制?
我想您正在寻找的是 strokes。
创建一个 canvas 比您想要的 SVG 大小稍大的文件。
用你想要的外线颜色在它上面画一个矩形。设置 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">