带有描边的 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"

带有描边的 SVG 蒙版

SVG mask with stroke

javascript

css

svg

mask

clip