JavaScript의 SVG 객체에 필터를 추가하려면 어떻게해야합니까?

this code을 참조로 사용하여 JavaScript를 사용하여 feGaussianBlur 필터를 SVG 사각형에 추가하려고합니다. 사각형이 생기지 만 필터링되지 않습니다. 내가 도대체 뭘 잘못하고있는 겁니까?JavaScript의 SVG 객체에 필터를 추가하려면 어떻게해야합니까?

나는이 같은 노력하고 있어요 :

var container = document.getElementById("svgContainer"); 
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
mySvg.setAttribute("version", "1.1"); 
container.appendChild(mySvg); 

var obj = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
obj.setAttribute("width", "90"); 
obj.setAttribute("height", "90"); 

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); 

var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter"); 
filter.setAttribute("id","f1"); 
filter.setAttribute("x","0"); 
filter.setAttribute("y","0"); 

var gaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur"); 
gaussianFilter.setAttribute("in","SourceGraphic"); 
gaussianFilter.setAttribute("stdDeviation","15"); 

filter.appendChild(gaussianFilter); 
defs.appendChild(filter); 
mySvg.appendChild(defs);  
obj.setAttribute("filter","url(#f1)"); 

mySvg.appendChild(obj);

출처

2012-06-03 stonecup64

[당신이 시도 무엇?] (http://whathaveyoutried.com/) 스택 오버플로 귀하의 개인 연구 조교가 아닙니다] (http://meta.stackexchange.com/a/128553/186879). 본격적인 예제/연구를 요구하는 것보다 (예 : 코드 게시와 같은) 문제를 해결하기위한 노력을 보여 주면 더 많은 도움을받을 것입니다. –

답변 : 실제 솔루션을 답방 상자에 추가하는 것이 훨씬 낫습니다. _EDIT : 제거하십시오. 문제가 해결되었습니다. 나는 이것을 당신이 스스로 해결할 수 있다고하더라도 질문을 던지는 대가로 생각하는 경향이있다. – halfer

위의 코드는 이제 나를 위해 작동! 하나는 단순히 createElementNS, setAttribute 및 appendChild 방법을 사용할 수 있습니다.

출처

2012-06-03 11:37:58 stonecup64

답장을 보내 주셔서 감사합니다. –

내가 할 수있는 것처럼 더 읽기 쉬운 코드를 선호한다면 - svg.js은 이제 svg filter plugin입니다. 귀하의 예제 코드는 감소 것 : 아마 너무 늦게하지만 여전히 언급 할 가치가 올해

var draw = SVG('canvas') 

draw.rect(90,90) 

rect.filter(function(add) { 
    add.gaussianBlur('15') 
})

출처

2013-07-27 13:20:39 wout

JavaScript의 SVG 객체에 필터를 추가하려면 어떻게해야합니까?

답변

관련 문제