SVG mask with stroke

Question

I have an SVG that is clipping a div filled with a color. What I need is to use the mask to clip the bg color & stroke the clipped result. Is this possible? I'm open to reconfiguring things to not use background-color if need be.

var container = document.createElement('div');
var el = container.appendChild(document.createElement('div');

el.style["background-color"] = "orange";
el.style["-webkit-mask-image"] = 'url("img/marker.svg")';
el.style["mask-image"] =  'url("img/marker.svg")';




//marker.svg 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 108 180" style="enable-background:new 0 0 108 180;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#7C1416;}
</style>
<path class="st0" d="M54,0C24.2,0,0,24.2,0,54s54,126,54,126s54-96.2,54-126S83.8,0,54,0z M54,77c-12.7,0-23-10.3-23-23
    c0-12.7,10.3-23,23-23s23,10.3,23,23C77,66.7,66.7,77,54,77z"/>
</svg>

Answer 1

I kept plugging and come up with an alternate solution. Hopefully this helps someone else.

var height = 250  //the height you want the SVG to be displayed

var width = height*0.6 //the width you want the SVG to be displayed.  I know the ratio for mine which happens to be 60% of the height, yours will be different

var strokeWidth = 3 //how wide do you want a stroke.  0 also works here for no stroke
var fillColor = "orange"  //Can use hex value also ex: #fff000;
var strokeColor = "purple"  //Can use hex value also ex: #ccc;

var myShape = "M54,0C24.2,0,0,24.2,0,54s54,126,54,126s54-96.2,54-126S83.8,0,54,0z M54,77c-12.7,0-23-10.3-23-23c0-12.7,10.3-23,23-23s23,10.3,23,23C77,66.7,66.7,77,54,77z"  //this is the "path" node within your SVG file.  Make sure your svg is just one flat path, without a stroke.  JS will add a stroke

var originalHeight = 180  //the original height of your SVG path file.  This value is used to recenter the shape after we add the stroke

var originalWidth = originalHeight*0.6 //the original height of your SVG path file.  This value is used to recenter the shape after we add the stroke




//This is all internal stuff that you shouldn't have to mess with.
var _viewboxStrokeOffset = -(strokeWidth/2)  //calculates an offset to draw the path based on the stroke width

var _strokedHeight = originalHeight + strokeWidth //height of viewbox with stroke
var _strokedWidth = originalWidth + strokeWidth //width of viewbox with stroke

//creates our container SVG object
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('style', 'border: 1px solid black');
svg.setAttribute('width', width);
svg.setAttribute('height', height);

//sets up our viewbox with calculated values
var viewBoxArray = [_viewboxStrokeOffset,_viewboxStrokeOffset/2, _strokedWidth, _strokedHeight]
svg.setAttribute('viewBox', viewBoxArray.join(" "));
svg.setAttribute('id', 'mySVG')
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
//adds the svg to the document
document.body.appendChild(svg);

//create a path object
var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
shape.setAttribute("d", myShape);

//This green will get replaced
shape.setAttribute("fill", fillColor);
shape.setAttribute("stroke", strokeColor);
shape.setAttribute("stroke-width", strokeWidth+"px")
shape.setAttribute("class", "marker")
//add the marker to the document
document.getElementById("mySVG").appendChild(shape);

//get the marker later if you want to change things
var marker = document.getElementsByClassName('marker')[0]
//marker.style.fill="blue"
//marker.style.stroke="green"
//marker.style["stroke-width"]= strokeWidth+"px"