html - Apply an SVG filter to a div's background-color -


i have <div> has background-color sitting in front of image. i'm trying apply multiply effect using svg background image behind div comes through:

<svg>     <filter id="multiply">         <feblend mode="multiply"/>     </filter> </svg>

unfortunately, solid background color being changed, , no transparency through background.

here's fiddle: https://jsfiddle.net/0p58bxsp/1/

the effect i'm expecting this:

multiply effect

i know visual effect fudged using rgba value background color, i'm looking combination of solid color having multiply filter applied it.

is limitation of current svg implementation?

here's definition of multiply blend:

multiply blend mode multiplies numbers each pixel of top layer corresponding pixel bottom layer. result darker picture. , base layer value , b top layer value.

as such, using opacity or alpha doesn't give me exact result i'm looking for.

this supposed possible if stayed within svg 1.1 using backgroundimage pseudo input - ie10 ever supported inline svg (opera supported .svg files). firefox, chrome & safari never supported it, , it's formally declared "not implemented" folks work on browsers.

you can import copy of background image using feimage , position just right match actual background exactly. depending on design - take extensive javascript. , url() filters can behave strangely. https://jsfiddle.net/0p58bxsp/3/ shows how - surfaces regression bug in chrome positioned primitives fixed in next chrome.

<div id="background">     <div id="effect">         effect goes here     </div> </div> <svg width="100%" height="100%" viewbox="0 0 200 200"> <defs>     <filter id="multiply" x="0%"  y="0%" height="300%" width="300%">       <feimage x="0" width="400" height="400" y="0" preserveaspectratio="xmaxymax meet" xlink:href="http://lorempixel.com/400/400/" />      <feoffset dx="-100" dy="-100"/>         <feblend mode="multiply" in="sourcegraphic"/>     </filter>     </defs> </svg>

safari 9(and safari 9) has "backdrop-filter" this, , can specify mix-blend-mode has broader support, still pretty edge.

if need multiply blend, might best keep in svg.


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more