image - SVG color-shadow filter fails when built with JavaScript -



image - SVG color-shadow filter fails when built with JavaScript -

i created drop-shadow svg image, works fine using pure svg (see a live demo):

class="lang-svg prettyprint-override"><!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="drop"> <fecomponenttransfer result="offout" in="sourcealpha"> <fefunca type="linear" /> <fefuncr type="discrete" tablevalues="1" /> <fefuncg type="discrete" /> <fefuncb type="discrete" /> </fecomponenttransfer> <feoffset result="shadow" dx="67" dy="0" in="offout" /> <fegaussianblur stddeviation="8" result="blurout" in="shadow" /> <feblend in="sourcegraphic" in2="blurout" mode="normal" /> </filter> </defs> <g> <g filter="url(#drop)"> <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" preserveaspectratio="defer"></image> </g> </g> </svg> </body> </html>

here image created reddish shadow, expected, seek create , modify svg via javascript, using next code (see a live demo):

class="lang-html prettyprint-override"><!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="sv"> <rect width="90" height="90" stroke="green" stroke-width="3" fill="rgba(255,25,8,1)" /> <g id="gr"> <image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" preserveaspectratio="defer"></image> </g> </svg> </body> <script> var feoffset = document.createelementns("http://www.w3.org/2000/svg", "feoffset"); var fegaussianblur = document.createelementns("http://www.w3.org/2000/svg", "fegaussianblur"); var filter = document.createelementns("http://www.w3.org/2000/svg", "filter"); var definition = document.createelementns("http://www.w3.org/2000/svg", "defs"); filter.setattribute("id", "fpicture5"); filter.setattribute("filterunits", "userspaceonuse"); feoffset.setattribute("result", "shadow"); feoffset.setattribute("in", "offout"); feoffset.setattribute("dx", "67"); feoffset.setattribute("dy", "0"); fegaussianblur.setattribute("result", "blurout"); fegaussianblur.setattribute("in", "shadow"); fegaussianblur.setattribute("stddeviation", "8"); var feblend = document.createelementns("http://www.w3.org/2000/svg", "feblend"); var fectransfer = document.createelementns("http://www.w3.org/2000/svg", "fecomponenttransfer"); var fefuncr = document.createelementns("http://www.w3.org/2000/svg", "fefuncr"); var fefuncg = document.createelementns("http://www.w3.org/2000/svg", "fefuncg"); var fefuncb = document.createelementns("http://www.w3.org/2000/svg", "fefuncb"); fectransfer.setattribute("in", "sourcealpha"); fectransfer.setattribute("result", "offout"); feblend.setattribute("in", "sourcegraphic"); feblend.setattribute("in2", "blurout"); feblend.setattribute("mode", "normal"); fefuncr.setattribute("type", "discrete"); fefuncg.setattribute("type", "discrete"); fefuncb.setattribute("type", "discrete"); fefuncr.setattribute("tablevalues", "1"); fefuncg.setattribute("tablevalues", "0"); fefuncb.setattribute("tablevalues", "0"); fectransfer.appendchild(fefuncr); fectransfer.appendchild(fefuncg); fectransfer.appendchild(fefuncb); filter.appendchild(fectransfer); filter.appendchild(feoffset); filter.appendchild(fegaussianblur); filter.appendchild(feblend); definition.appendchild(filter); document.getelementbyid("sv").appendchild(definition); document.getelementbyid("gr").setattribute("filter", "url(#fpicture5)"); </script> </html>

the result image created, shadow black.

i can't find way around create reddish intended, ideas?

works fine on firefox once replace image 1 exists e.g. 1 in other fiddle:

<image x="10" y="100" width="440" height="60" xlink:href="http://placekitten.com/100/80" preserveaspectratio="defer"></image>

if using other ua , doesn't work perhaps should raise bug on whatever bug tracker uses.

did realise you're missing fefunca fecomponenttransfer kid in sec fiddle?

javascript image svg svg-filters

Comments

Post a Comment

Popular posts from this blog

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more

Hibernate criteria by a list of natural ids -

Hibernate criteria by a list of natural ids - i trying create hibernate criteria using list of natural ids. saw illustration here http://docs.jboss.org/hibernate/core/3.5/reference/en-us/html/querycriteria.html#query-criteria-naturalid shows illustration querying single record: session.createcriteria(user.class) .add(restrictions.naturalid() .set("name", "gavin") .set("org", "hb")); is there improve way create criteria list of natural ids illustration below? junction junction = restrictions.disjunction() .add(restrictions.naturalid() .set("name", "gavin") .set("org", "hb")) .add(restrictions.naturalid() .set("name", "jdoe") .set("org", "rh")); session.createcriteria(user.class) .add(junction); thanks. in experience, no. reason due limitations of sql in implementations. when seek phrase in sql gets...
Read more

ios - Lagging ScrollView with UIWebview inside -

ios - Lagging ScrollView with UIWebview inside - i have uiwebview within uiscrollview lot of content. when content loaded uiwebview big, starts lag. does know how solve issue? maintain in mind lags when uiwebview's height becomes considerably big. thank in advance! if read documentation on uiwebview , states not embed uiwebview uitableview or uiscrollview . doing leads unexpected behaviour, , think experiencing first hand. sorry bearer of bad news. update - specific warning apple docs: the documentation addresses issue specifically. important: should not embed uiwebview or uitableview objects in uiscrollview objects. if so, unexpected behavior can result because touch events 2 objects can mixed , wrongly handled. apple reference on uiwebview . update 2: after doing few searches (search link, same posted in comments), came across this answer, may provide insight. monitors content offset in both uiscrollview , uiwebview via delegates, , cle...
Read more