1. Zuhause
  2. Frage und Antwort
  3. SVG-Maske mit Strich

SVG-Maske mit Strich

2016-09-21 4 views
0

Ich habe eine SVG, die ein div mit einer Farbe gefüllt Clipping ist. Was ich brauche, ist die Maske zu verwenden, um die bg-Farbe & zu schneiden, streichen Sie das geclippte Ergebnis. Ist das möglich? Ich bin offen dafür, Dinge neu zu konfigurieren, um background-color notfalls zu verwenden.SVG-Maske mit Strich

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>

Quelle

2016-09-21 Justin Young

+0

Gibt es einen Grund, warum Sie sind nicht nur die SVG als Hintergrund für die div, anstatt mit den div zu befestigen? –

+0

Ja, ich möchte die Farbe dynamisch steuern können. über JS. Gibt es eine Möglichkeit, die SVG von der irk zu lesen und programmgesteuert ändern Sie die volle Farbe auf der SVG? –

+0

Was ist das "Ärgernis"? Ist das ein Tippfehler für Link? Sie können die Datei ändern, wenn Sie sie über '' hinzufügen. Aber Sie können es nicht mit CSS stylen. Dazu müssten Sie das SVG auf der Seite einfügen - entweder direkt im Code oder durch Laden aus einer Datei und Einfügen in das DOM. –

Antwort

0

Ich hielt Einstecken und mit einer alternativen Lösung auf. Hoffentlich hilft das jemand anderem.

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"

Quelle

2016-09-22 17:19:53

Verwandte Themen

 Verwandte Themen