javascript - opacity vs fill-opacity in svg -

-

what difference in opacity vs 'fill-opacity' in svg?

i referred docs fill-opacity , opacity confused meant fill-opacity: opacity of content of current object vs opacity: transparency of object

the difference name indicates :). fill-opacity applicable fill of element (or in other words, background), stroke-opacity applicable stroke whereas opacity applicable both.

the opacity kind of post-processing operation. is, element (or group) whole (the fill + stroke) rendered , transparency adjusted based on opacity setting whereas fill-opacity , stroke-opacity intermediate steps, transparency individually added stroke , fill. when stroke-opacity , fill-opacity used together, result still not same using opacity (because transparency on fill let fill color show through wherever overlap). can see difference visually in first 2 elements below.

also indicated robert (in comments), fill-opacity doesn't apply image whereas opacity work.

svg {    width: 100vw;    height: 100vh;  }  body {    background: url(http://lorempixel.com/600/600/nature/1);    height: 100vh;  }  polygon {    stroke-width: 3;  }
<svg viewbox='0 0 40 190'>    <polygon points='10,10 30,10 30,30 10,30' fill='steelblue' stroke='crimson' opacity='0.5' />    <polygon points='10,40 30,40 30,60 10,60' fill='steelblue' stroke='crimson' fill-opacity='0.5' stroke-opacity='0.5' />    <polygon points='10,70 30,70 30,90 10,90' fill='steelblue' stroke='crimson' fill-opacity='0.5' />    <polygon points='10,100 30,100 30,120 10,120' fill='steelblue' stroke='crimson' stroke-opacity='0.5' />    <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='130' width='23' height='23' stroke='crimson' opacity='0.5' />    <image xlink:href='http://lorempixel.com/100/100/nature/3' x='8.5' y='160' width='23' height='23' stroke='crimson' fill-opacity='0.5' />  </svg>

in css world can think of in below snippet. (note not saying equal, there subtle differences between svg , css. attempt explain svg attributes translate in css.)

div {    height: 20vh;    width: 20vh;    margin: 30px auto;    font-family: verdana;    font-size: 2vw;  }  div:nth-of-type(1) {    opacity: 0.5;    background: rgba(70, 130, 180, 1);    border: .35vw solid rgba(220, 20, 60, 1);  }  div:nth-of-type(2) {    background: rgba(70, 130, 180, 0.5);    border: .35vw solid rgba(220, 20, 60, 1);  }  div:nth-of-type(3) {    background: rgba(70, 130, 180, 1);    border: .35vw solid rgba(220, 20, 60, 0.5);  }  body {    background: url(http://lorempixel.com/600/600/nature/1);    height: 100vh;  }
<div></div>  <div></div>  <div></div>


Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

delphi - cxGrid : instead of "go to next cell on enter" using "enter" do that with the arrow keys -

-
Image
is there way can achieve cxgrid's functionality "go next cell on enter" using arrow keys on keyboard instead of hitting "enter" ??? right can navigate arrow keys cells move not selected (blue color). if edit cell in column , move cell beneath (with arrow key) , grid jumps other random record in grid,which annoying. is question of settings or must program functionality ? edit : simple temporary table use gather data. has no indexed fields or autoinc field : procedure tform3.cxbutton1click(sender: tobject); begin datamodule2.acrquery2.close; datamodule2.acrquery2.sql.clear; datamodule2.acrquery2.sql.text :='insert temp select company_id,member_id,surname,name members company_id =:a1'; datamodule2.acrquery2.params.parambyname('a1').value :=cxlookupcombobox2.text; datamodule2.acrquery2.execsql; datamodule2.acrquery3.close; datamodule2.acrquery3.sql.clear; datamodule2.acrquery3.sql.text :='update temp set month=:a1,year=:a2'; data...
Read more