1. ホーム
  2. 質問と答え
  3. ストローク付きSVGマスク

ストローク付きSVGマスク

2016-09-21 4 views
0

私は、色で塗りつぶされたdivをクリップしているSVGを持っています。私が必要とするのは、マスクを使用して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

あなただけのdivの背景としてSVGを使用して、というよりも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

関連する問題

 関連する問題