SVG中风口罩

Question

我有一个SVG剪辑了一个充满颜色的div。 我需要的是使用蒙版剪切bg颜色并描边剪切的结果。 这可能吗？ 我愿意重新配置一些东西，以在需要时不使用background-color 。

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

我一直插电，并提出了替代解决方案。 希望这可以帮助其他人。

 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"