1. дома
  2. Вопрос и ответ
  3. SVG-маска с инсультом

SVG-маска с инсультом

2016-09-21 3 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. Есть ли способ прочитать svg из irk и программно изменить полный цвет на 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

Смежные вопросы

 Смежные вопросы