带描边的 SVG 蒙版

Posted 2023-02-25

【中文标题】带描边的 SVG 蒙版

【英文标题】：SVG mask with stroke

【发布时间】：2016-09-21 19:42:47

【问题描述】：

我有一个 SVG 正在裁剪一个填充了颜色的 div。我需要的是使用遮罩来剪裁背景颜色并描边剪裁的结果。这可能吗？如果需要，我愿意重新配置不使用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">
    .st0fill:#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>

【问题讨论】：

您不只是使用 SVG 作为 div 的背景，而不是使用它来剪辑 div，有什么原因吗？

是的，我希望能够动态控制颜色。通过 JS。有没有办法从 irk 中读取 svg 并以编程方式更改 svg 上的全色？

什么是“讨厌”？这是链接的错字吗？如果您通过<object> 包含该文件，则可以修改该文件。但是你不能用 CSS 来设置它的样式。为此，您需要在页面中内联 SVG - 直接在代码中，或者通过从文件加载并将其插入 DOM。

【参考方案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"