Есть ли способ контура или нарисовать элемент svg с Js?

Question

Есть ли способ контура или наброски элемента svg с помощью SnapSVG и другого JavaScript Lib?

Answer 1

Создайте холст немного больше размера SVG, который вы хотите.

Нарисуйте прямоугольник над ним в цвете, в котором вы хотите outLine. Установите globalCompositeOperation = "destination-atop", затем нарисуйте SVG сверху. Теперь у вас есть маска SVG.

Затем нарисуйте эту маску на другом холсте по кругу с радиусом, который вам нужен. Затем нарисуйте 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">

Answer 2

Я думаю, используя strokes - это то, что вы ищете.