1. 首頁
  2. 問答
  3. 帶描邊的SVG蒙版

帶描邊的SVG蒙版

2016-09-21 386 views
0

我有一個SVG剪裁一個填充了顏色的div。我需要的是使用蒙版來剪裁bg顏色並剪切修剪後的結果。這可能嗎？如果需要，我願意重新配置不使用background-color。帶描邊的SVG蒙版

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>

來源

2016-09-21 Justin Young

+0

有沒有你不只是使用SVG作爲DIV的背景下，而不是用它夾在div理由嗎？ –

+0

是的，我想能夠動態地控制顏色。通過JS。有沒有辦法從irk讀取svg並以編程方式更改svg上的全色？ –

+0

什麼是「irk」？這是鏈接錯字嗎？如果您通過「」包含文件，則可以修改該文件。但是你不能用CSS來設計它。你需要在頁面內嵌SVG--直接在代碼中，或者從文件加載並將其插入到DOM中。 –

回答

0

我不斷堵塞，並提出了一個替代解決方案。希望這可以幫助別人。

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"

來源

2016-09-22 17:19:53

相關問題

 相關問題