How to enlarge svg? - css
I would like to zoom in a svg file, I don't know how to do it... Here is an
<https://jsfiddle.net/meteyepg/zq2gyhcz/>
I don't know if I should use some css or javascript.
Thanks in advance !
Here is a demo of what exactly you need demo Tiger
Reference the svg-pan-zoom.js file from your HTML document. Then call the init method:
var panZoomTiger = svgPanZoom('#demo-tiger');
// or
var svgElement = document.querySelector('#demo-tiger')
var panZoomTiger = svgPanZoom(svgElement)
First argument to function should be a CSS selector of SVG element or a DOM Element.
If you want to override the defaults, you can optionally specify one or more arguments:
svgPanZoom('#demo-tiger', {
viewportSelector: '.svg-pan-zoom_viewport'
, panEnabled: true
, controlIconsEnabled: false
, zoomEnabled: true
, dblClickZoomEnabled: true
, mouseWheelZoomEnabled: true
, preventMouseEventsDefault: true
, zoomScaleSensitivity: 0.2
, minZoom: 0.5
, maxZoom: 10
, fit: true
, contain: false
, center: true
, refreshRate: 'auto'
, beforeZoom: function(){}
, onZoom: function(){}
, beforePan: function(){}
, onPan: function(){}
, onUpdatedCTM: function(){}
, customEventsHandler: {}
, eventsListenerElement: null
});
For more you can refer to : https://github.com/ariutta/svg-pan-zoom
All you need to do is use a tiny bit of Javascript to get the bounding box of your SVG contents, and change the SVG's viewBox to match it.
// Get a reference to the SVG element
var mymap = document.getElementById("mymap");
// Get the bounding box of the SVG contents
var bbox = mymap.getBBox();
// Update the SVG's viewBox to match the bounding box
mymap.setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height].join(" "));
.pole {
fill : #ffffff;
fill-opacity : 1;
stroke : black;
stroke-opacity : 1;
stroke-width : 0.002;
}
.ring {
fill : #ffffff;
fill-opacity : 1;
stroke : black;
stroke-opacity : 1;
stroke-width : 0.002;
}
.multiple {
fill : #ffffff;
fill-opacity : 1;
stroke : black;
stroke-opacity : 1;
stroke-width : 0.002;
}
.rural {
fill : #ffffff;
fill-opacity : 1;
stroke : black;
stroke-opacity : 1;
stroke-width : 0.002;
}
polygon:hover{
background:red;
}
<svg id="mymap" xmlns="http://www.w3.org/2000/svg" width="1000" height="900" viewBox="-5.139017285 41.36275743 14.6988406 9.726639272" preserveAspectRatio="none" version="1.1">
<g transform="translate(0,51.0893967) scale(1,-1) translate(0,-41.36275743)">
<g class="pole">
<polygon id="acheres" points="2.070157211,48.9463099 2.049002093,48.95709751 2.048854207,48.9592097 2.054221235,48.96897355 2.074400928,48.98480549 2.089784164,48.98802569 2.127452768,48.98905194 2.15264335,48.98610305 2.166353805,48.98147796 2.175023435,48.97324663 2.17815528,48.96351097 2.172905176,48.96386156 2.166086586,48.97684487 2.143263034,48.98570371 2.122047961,48.9870611 2.108124305,48.98229118 2.08706638,48.98405722 2.088198795,48.97714139 2.086659564,48.97377536 2.075634134,48.96617284 2.075675644,48.95231498 2.070157211,48.9463099"/>
<polygon id="78015 ANDRESY" points="2.048854207,48.9592097 2.045555519,48.96184542 2.035319459,48.96146674 2.044321964,48.982888 2.027031832,48.98907096 2.024722631,48.99561693 2.039921366,48.99626108 2.051868131,48.99164389 2.071883805,48.99339209 2.074400928,48.98480549 2.054221235,48.96897355 2.048854207,48.9592097"/>
<polygon id="78029 AUBERGENVILLE" points="1.852237514,48.93434872 1.849714323,48.93548469 1.834715378,48.95239141 1.839907316,48.96144411 1.836578224,48.97777058 1.817612632,48.97548071 1.828338802,48.98145852 1.854982163,48.98764225 1.864291998,48.95306196 1.869923799,48.94714359 1.856788747,48.94341268 1.852237514,48.93434872"/>
<polygon id="78031 AUFFREVILLE-BRASSEUIL" points="1.698418443,48.94366826 1.694269552,48.94577263 1.694827621,48.95237107 1.699335971,48.95775328 1.702412125,48.96364143 1.71922565,48.96143891 1.710223589,48.94938093 1.698418443,48.94366826"/>
<polygon id="78050 BAZOCHES-SUR-GUYONNE" points="1.858964194,48.75960125 1.848403461,48.76653391 1.839049995,48.76433855 1.8252923,48.76804486 1.834318253,48.77576993 1.83603796,48.78103966 1.856047377,48.78095409 1.871169124,48.79917719 1.872623707,48.79865124 1.866002617,48.78569027 1.870019835,48.77932409 1.863228557,48.77057069 1.869040323,48.76548981 1.867333741,48.76011268 1.858964194,48.75960125"/>
<polygon id="78073 BOIS-D'ARCY" points="2.050125421,48.79841285 2.030089508,48.79668691 1.994400509,48.79911726 1.996440552,48.81196934 2.000393008,48.81393622 2.024795939,48.81185322 2.048458423,48.80322054 2.050125421,48.79841285"/>
<polygon id="78092 BOUGIVAL" points="2.122449918,48.8507803 2.131714613,48.86237789 2.12435642,48.87438478 2.131966627,48.87097767 2.150387185,48.87086701 2.153764153,48.86440652 2.144469037,48.86181321 2.139863842,48.85590729 2.122449918,48.8507803"/>
<polygon id="78117 BUC" points="2.123282122,48.75352314 2.106444271,48.75735595 2.101493757,48.7564913 2.105472175,48.78074332 2.125014464,48.78083407 2.142014644,48.79233515 2.146395118,48.79084649 2.145853095,48.77074026 2.140552657,48.77117895 2.133318347,48.76597286 2.123282122,48.75352314"/>
<polygon id="78118 BUCHELAY" points="1.663794537,48.96964773 1.654335039,48.98203397 1.664047705,48.9948772 1.702551852,48.98923824 1.686219937,48.97849327 1.665963893,48.97028345 1.663794537,48.96964773"/>
<polygon id="78123 CARRIERES-SOUS-POISSY" points="2.049002093,48.95709751 2.04726846,48.9466248 2.036390265,48.93463986 2.022226504,48.93000152 2.008405583,48.93471735 2.00356966,48.94132326 2.008322701,48.94192925 2.028235253,48.95906235 2.03600794,48.95895423 2.035319459,48.96146674 2.045555519,48.96184542 2.048854207,48.9592097 2.049002093,48.95709751"/>
<polygon id="78124 CARRIERES-SUR-SEINE" points="2.174289314,48.89906693 2.161364085,48.90799743 2.160838792,48.92026953 2.167915863,48.92657813 2.180340271,48.9167443 2.19919119,48.9189672 2.200591009,48.90867933 2.174289314,48.89906693"/>
<polygon id="78126 LA CELLE-SAINT-CLOUD" points="2.120545689,48.83602536 2.110636174,48.84108762 2.110920421,48.84998467 2.119793951,48.8482695 2.122449918,48.8507803 2.139863842,48.85590729 2.144469037,48.86181321 2.153764153,48.86440652 2.15041165,48.85850089 2.159867593,48.8477212 2.150032316,48.84666241 2.145872523,48.83690143 2.120545689,48.83602536"/>
<polygon id="78133 CHAMBOURCY" points="2.037199223,48.87765472 2.020252868,48.88259867 1.998373859,48.89140232 2.012652512,48.89579287 2.02254073,48.89366157 2.026951436,48.89557715 2.027028641,48.91261147 2.039885102,48.91687015 2.052729085,48.90693576 2.054452747,48.8976681 2.037199223,48.87765472"/>
<polygon id="78138 CHANTELOUP-LES-VIGNES" points="2.035319459,48.96146674 2.03600794,48.95895423 2.028235253,48.95906235 2.023417014,48.97855594 2.026211825,48.98470279 2.020437441,48.99384643 2.024722631,48.99561693 2.027031832,48.98907096 2.044321964,48.982888 2.035319459,48.96146674"/>
<polygon id="78140 CHAPET" points="1.951517373,48.95469287 1.932478159,48.95816711 1.920774567,48.96868327 1.934534757,48.98243077 1.939088359,48.98090635 1.949439854,48.97979239 1.953586536,48.96994531 1.95573515,48.95682509 1.951517373,48.95469287"/>
<polygon id="78146 CHATOU" points="2.158314349,48.88060908 2.144932867,48.88338319 2.145855525,48.89364234 2.135995118,48.90591953 2.125952172,48.90766332 2.133703442,48.91164072 2.142580713,48.90449195 2.161364085,48.90799743 2.174289314,48.89906693 2.169348729,48.89581313 2.158314349,48.88060908"/>
<polygon id="78158 LE CHESNAY" points="2.148475928,48.82849269 2.140437002,48.82446883 2.136072645,48.81493967 2.131007668,48.81486698 2.114001309,48.82187448 2.112676125,48.82851124 2.120545689,48.83602536 2.145872523,48.83690143 2.148475928,48.82849269"/>
<polygon id="78160 CHEVREUSE" points="2.037642875,48.68022018 2.029656784,48.68454514 2.020820821,48.69645453 2.023426096,48.70319525 2.002901161,48.71409842 2.004349825,48.72082081 2.034230994,48.72594163 2.061828415,48.72302255 2.066560867,48.71761773 2.055518385,48.69981965 2.055658739,48.68678681 2.045836488,48.68678058 2.04255161,48.68069147 2.037642875,48.68022018"/>
<polygon id="78165 LES CLAYES-SOUS-BOIS" points="1.994400509,48.79911726 1.986479116,48.79968895 1.966898485,48.82179131 1.970086059,48.83487839 1.983641157,48.83353729 1.995914202,48.8272821 2.000393008,48.81393622 1.996440552,48.81196934 1.994400509,48.79911726"/>
<polygon id="78168 COIGNIERES" points="1.932428891,48.74171516 1.916481817,48.73356594 1.906655067,48.73529333 1.90328857,48.73824879 1.89559543,48.74255844 1.89348425,48.76517008 1.900973052,48.76556304 1.901068543,48.76813643 1.91621892,48.7586864 1.940190234,48.75667083 1.937122798,48.74830534 1.932428891,48.74171516"/>
<polygon id="78172 CONFLANS-SAINTE-HONORINE" points="2.074400928,48.98480549 2.071883805,48.99339209 2.071694219,49.00170884 2.084914921,49.01467871 2.107910568,49.00906964 2.12125682,49.01849327 2.126808839,49.00866906 2.121573868,48.99489922 2.127452768,48.98905194 2.089784164,48.98802569 2.074400928,48.98480549"/>
<polygon id="78190 CROISSY-SUR-SEINE" points="2.150387185,48.87086701 2.131966627,48.87097767 2.12435642,48.87438478 2.119794118,48.87811065 2.110267283,48.8874385 2.118188802,48.89077973 2.129363382,48.87664272 2.135559274,48.88533942 2.144932867,48.88338319 2.158314349,48.88060908 2.150387185,48.87086701"/>
<polygon id="78208 ELANCOURT" points="1.973475056,48.75341764 1.967799891,48.75699362 1.964447051,48.76210959 1.951944219,48.75937405 1.952045772,48.76515857 1.947364263,48.76588196 1.936505781,48.77993442 1.941237904,48.79154348 1.956870313,48.78927043 1.97004222,48.79986324 1.985935301,48.79964836 1.970907901,48.78565942 1.976015744,48.77230137 1.973507485,48.76560579 1.978059992,48.75963637 1.973475056,48.75341764"/>
<polygon id="78224 L'ETANG-LA-VILLE" points="2.070853017,48.85462684 2.069626391,48.85462631 2.059741675,48.85557434 2.044011732,48.86382297 2.036302563,48.86789829 2.046811515,48.87470976 2.058703418,48.87984932 2.063022551,48.87852516 2.077372254,48.87361815 2.080725077,48.87136854 2.070853017,48.85462684"/>
<polygon id="78227 EVECQUEMONT" points="1.936111079,49.01021473 1.919474003,49.01482328 1.931983413,49.01748915 1.937802165,49.02177633 1.945607277,49.02526232 1.954947812,49.02453465 1.957081174,49.02180147 1.951697073,49.0121594 1.936111079,49.01021473"/>
<polygon id="78238 FLINS-SUR-SEINE" points="1.88479865,48.94051087 1.871713506,48.94143164 1.869923799,48.94714359 1.864291998,48.95306196 1.854982163,48.98764225 1.864812509,48.989894 1.875786925,48.99236249 1.87795879,48.98228364 1.889532844,48.97582639 1.885978002,48.97341025 1.88479865,48.94051087"/>
<polygon id="78239 FOLLAINVILLE-DENNEMONT" points="1.708405265,49.00829511 1.670579803,49.0082598 1.674538185,49.0192123 1.683953366,49.01998137 1.696950308,49.03060002 1.707021648,49.02873044 1.711475849,49.03054994 1.723457162,49.04497658 1.732065796,49.05041846 1.735637867,49.04868454 1.730035338,49.01542362 1.708405265,49.00829511"/>
<polygon id="78242 FONTENAY-LE-FLEURY" points="2.048458423,48.80322054 2.024795939,48.81185322 2.034785407,48.82617208 2.047715943,48.82673445 2.052683141,48.83074929 2.059396428,48.8293992 2.070680908,48.82301168 2.060286579,48.81704828 2.048458423,48.80322054"/>
<polygon id="78251 FOURQUEUX" points="2.046811515,48.87470976 2.037199223,48.87765472 2.054452747,48.8976681 2.075082276,48.8874057 2.063022551,48.87852516 2.058703418,48.87984932 2.046811515,48.87470976"/>
<polygon id="78261 GAILLON-SUR-MONTCIENT" points="1.907059475,49.01225586 1.899708233,49.01401423 1.89733139,49.01713989 1.8818983,49.01954209 1.883462901,49.03262304 1.908522502,49.04802383 1.914081504,49.04583509 1.91247369,49.04161205 1.905083695,49.02556507 1.907059475,49.01225586"/>
<polygon id="78267 GARGENVILLE" points="1.792267113,48.96974226 1.80150436,48.98501553 1.797852557,49.00879269 1.799137585,49.01707007 1.820380621,49.011831 1.827651209,48.99619151 1.822835058,48.98315831 1.823799101,48.97980432 1.828338802,48.98145852 1.817612632,48.97548071 1.806854051,48.97102143 1.792267113,48.96974226"/>
<polygon id="78297 GUYANCOURT" points="2.101493757,48.7564913 2.088237895,48.75293689 2.078589752,48.7539242 2.068446544,48.7567148 2.05373553,48.76751859 2.055380119,48.77062573 2.046455005,48.77353201 2.044366015,48.77985644 2.053611708,48.79460892 2.070251387,48.78981062 2.105472175,48.78074332 2.101493757,48.7564913"/>
<polygon id="78299 HARDRICOURT" points="1.888038124,48.99843898 1.881078102,49.01064957 1.861712766,49.01411858 1.868558417,49.0180592 1.8818983,49.01954209 1.89733139,49.01713989 1.899708233,49.01401423 1.905287818,49.00485662 1.888038124,48.99843898"/>
<polygon id="78311 HOUILLES" points="2.19919119,48.9189672 2.180340271,48.9167443 2.167915863,48.92657813 2.182881354,48.93653752 2.198926853,48.93525192 2.204617626,48.92373373 2.19919119,48.9189672"/>
<polygon id="78314 ISSOU" points="1.785941217,48.9680416 1.785987787,48.97833042 1.771521698,48.98227507 1.775457151,48.98863755 1.778641441,48.99501918 1.795654192,49.00219675 1.797852557,49.00879269 1.80150436,48.98501553 1.792267113,48.96974226 1.785941217,48.9680416"/>
<polygon id="78321 JOUARS-PONTCHARTRAIN" points="1.89348425,48.76517008 1.889945589,48.77033624 1.885899951,48.80431637 1.885072705,48.80543298 1.894001107,48.80563285 1.893691576,48.80867012 1.898492104,48.80962289 1.914910943,48.80263145 1.941237904,48.79154348 1.936505781,48.77993442 1.933118416,48.78252166 1.923446727,48.7809328 1.909132627,48.78399606 1.89687527,48.77790206 1.901068543,48.76813643 1.900973052,48.76556304 1.89348425,48.76517008"/>
<polygon id="78322 JOUY-EN-JOSAS" points="2.138892811,48.74312204 2.131088572,48.7470771 2.128439648,48.75339899 2.154687726,48.76295996 2.145853095,48.77074026 2.146395118,48.79084649 2.161929189,48.78223199 2.190662977,48.77503676 2.187626751,48.77251573 2.19247239,48.76363515 2.189517467,48.75416195 2.17524948,48.75751815 2.161767486,48.75247729 2.151345551,48.75262854 2.138958105,48.74658544 2.138892811,48.74312204"/>
<polygon id="78327 JUZIERS" points="1.828338802,48.98145852 1.823799101,48.97980432 1.822835058,48.98315831 1.827651209,48.99619151 1.820380621,49.011831 1.830198857,49.01354581 1.831662682,49.0201878 1.851427707,49.01677241 1.851364451,49.0103599 1.864812509,48.989894 1.854982163,48.98764225 1.828338802,48.98145852"/>
<polygon id="78335 LIMAY" points="1.751753677,48.96735787 1.732468928,48.97789372 1.727270503,48.98486247 1.719248307,49.00099195 1.708405265,49.00829511 1.730035338,49.01542362 1.755444722,49.00603123 1.763656031,48.99874176 1.76219038,48.9896975 1.751987383,48.97412333 1.751753677,48.96735787"/>
<polygon id="78343 LES LOGES-EN-JOSAS" points="2.128439648,48.75339899 2.123282122,48.75352314 2.133318347,48.76597286 2.140552657,48.77117895 2.145853095,48.77074026 2.154687726,48.76295996 2.128439648,48.75339899"/>
<polygon id="78350 LOUVECIENNES" points="2.110636174,48.84108762 2.102663857,48.84274592 2.092697912,48.84617837 2.094520195,48.85266775 2.106944288,48.85695224 2.105603548,48.86677239 2.109398751,48.87283545 2.119794118,48.87811065 2.12435642,48.87438478 2.131714613,48.86237789 2.122449918,48.8507803 2.119793951,48.8482695 2.110920421,48.84998467 2.110636174,48.84108762"/>
<polygon id="78354 MAGNANVILLE" points="1.699335971,48.95775328 1.674925606,48.96169501 1.665907148,48.96983314 1.665963893,48.97028345 1.686219937,48.97849327 1.696707401,48.978167 1.697464994,48.96483789 1.702412125,48.96364143 1.699335971,48.95775328"/>
<polygon id="78356 MAGNY-LES-HAMEAUX" points="2.105537547,48.71658502 2.100744439,48.7154876 2.087142379,48.71989975 2.073239288,48.71662638 2.07237408,48.7232489 2.056440404,48.73229876 2.035267043,48.73241733 2.018838003,48.74127827 2.006299266,48.74626563 1.991707355,48.74756447 2.011238395,48.76196646 2.025542613,48.75585971 2.045187351,48.75133217 2.061005617,48.75215919 2.068446544,48.7567148 2.078589752,48.7539242 2.086181792,48.74528471 2.084628612,48.7291452 2.102764121,48.72294156 2.105537547,48.71658502"/>
<polygon id="78358 MAISONS-LAFFITTE" points="2.142430773,48.93512179 2.127853526,48.9431913 2.134469098,48.95584742 2.147465234,48.96525715 2.172905176,48.96386156 2.17815528,48.96351097 2.178105164,48.95976961 2.17314149,48.95329658 2.142430773,48.93512179"/>
<polygon id="78361 MANTES-LA-JOLIE" points="1.727270503,48.98486247 1.718442276,48.98269103 1.702551852,48.98923824 1.664047705,48.9948772 1.656069533,48.99738718 1.657976271,49.00611404 1.670579803,49.0082598 1.708405265,49.00829511 1.719248307,49.00099195 1.727270503,48.98486247"/>
<polygon id="78362 MANTES-LA-VILLE" points="1.71922565,48.96143891 1.702412125,48.96364143 1.697464994,48.96483789 1.696707401,48.978167 1.686219937,48.97849327 1.702551852,48.98923824 1.718442276,48.98269103 1.727270503,48.98486247 1.732468928,48.97789372 1.729985016,48.96828047 1.723572117,48.96297818 1.71922565,48.96143891"/>
<polygon id="78367 MAREIL-MARLY" points="2.077372254,48.87361815 2.063022551,48.87852516 2.075082276,48.8874057 2.087831431,48.88441872 2.091815253,48.88587898 2.08422244,48.8787162 2.077372254,48.87361815"/>
<polygon id="78372 MARLY-LE-ROI" points="2.092697912,48.84617837 2.081046982,48.85312265 2.070853017,48.85462684 2.080725077,48.87136854 2.077372254,48.87361815 2.08422244,48.8787162 2.097451381,48.88014772 2.101094624,48.8855353 2.104393405,48.872933 2.109398751,48.87283545 2.105603548,48.86677239 2.106944288,48.85695224 2.094520195,48.85266775 2.092697912,48.84617837"/>
<polygon id="78382 MAURECOURT" points="2.071883805,48.99339209 2.051868131,48.99164389 2.039921366,48.99626108 2.024722631,48.99561693 2.02361373,48.99790106 2.026444957,49.00070281 2.046501654,49.00185304 2.064428879,49.00820803 2.071694219,49.00170884 2.071883805,48.99339209"/>
<polygon id="78383 MAUREPAS" points="1.940190234,48.75667083 1.91621892,48.7586864 1.901068543,48.76813643 1.89687527,48.77790206 1.909132627,48.78399606 1.923446727,48.7809328 1.933118416,48.78252166 1.936505781,48.77993442 1.947364263,48.76588196 1.952045772,48.76515857 1.951944219,48.75937405 1.940190234,48.75667083"/>
<polygon id="78384 MEDAN" points="1.969741349,48.94467954 1.969467129,48.9461161 1.979300104,48.95851188 1.996151247,48.96706266 2.002521172,48.95399492 1.99601125,48.94885046 1.980861352,48.94853376 1.978490145,48.94551884 1.969741349,48.94467954"/>
<polygon id="78396 LE MESNIL-LE-ROI" points="2.113204846,48.90633754 2.104127722,48.90740316 2.110353346,48.92071469 2.122239694,48.93202586 2.122791996,48.94217413 2.127853526,48.9431913 2.142430773,48.93512179 2.123833692,48.92247777 2.113204846,48.90633754"/>
<polygon id="78397 LE MESNIL-SAINT-DENIS" points="1.971530094,48.72094724 1.963558246,48.72533081 1.961916096,48.73476128 1.947876824,48.73370288 1.932428891,48.74171516 1.937122798,48.74830534 1.956509072,48.74880015 1.958146374,48.75536268 1.967799891,48.75699362 1.973475056,48.75341764 1.991707355,48.74756447 1.987763563,48.74542631 1.988680127,48.72900041 1.971530094,48.72094724"/>
<polygon id="78401 MEULAN-EN-YVELINES" points="1.881045108,48.99377858 1.888038124,48.99843898 1.905287818,49.00485662 1.899708233,49.01401423 1.907059475,49.01225586 1.914951705,49.01598751 1.919474003,49.01482328 1.936111079,49.01021473 1.93710153,49.00657244 1.881045108,48.99377858"/>
<polygon id="78403 MEZY-SUR-SEINE" points="1.864812509,48.989894 1.851364451,49.0103599 1.851427707,49.01677241 1.859255155,49.01396935 1.861712766,49.01411858 1.881078102,49.01064957 1.888038124,48.99843898 1.881045108,48.99377858 1.875786925,48.99236249 1.864812509,48.989894"/>
<polygon id="78418 MONTESSON" points="2.120242856,48.90320578 2.113204846,48.90633754 2.123833692,48.92247777 2.142430773,48.93512179 2.160838792,48.92026953 2.161364085,48.90799743 2.142580713,48.90449195 2.133703442,48.91164072 2.125952172,48.90766332 2.120242856,48.90320578"/>
<polygon id="78423 MONTIGNY-LE-BRETONNEUX" points="2.025542613,48.75585971 2.011238395,48.76196646 2.00890823,48.7678926 2.022284832,48.78526336 1.994400509,48.79911726 2.030089508,48.79668691 2.050125421,48.79841285 2.053611708,48.79460892 2.044366015,48.77985644 2.046455005,48.77353201 2.055380119,48.77062573 2.05373553,48.76751859 2.04993104,48.76946719 2.025542613,48.75585971"/>
<polygon id="78440 LES MUREAUX" points="1.920774567,48.96868327 1.915877441,48.97032981 1.89733232,48.97974739 1.889532844,48.97582639 1.87795879,48.98228364 1.875786925,48.99236249 1.881045108,48.99377858 1.93710153,49.00657244 1.946468883,49.00638525 1.939088359,48.98090635 1.934534757,48.98243077 1.920774567,48.96868327"/>
<polygon id="78442 NEAUPHLE-LE-CHATEAU" points="1.914910943,48.80263145 1.898492104,48.80962289 1.893691576,48.80867012 1.888957982,48.80905796 1.901268932,48.82196179 1.913066136,48.81993795 1.914910943,48.80263145"/>
<polygon id="78443 NEAUPHLE-LE-VIEUX" points="1.872623707,48.79865124 1.871169124,48.79917719 1.841755255,48.80062273 1.847901304,48.81270786 1.841537491,48.82881842 1.846622179,48.82866969 1.851510558,48.83433821 1.865603069,48.83161251 1.874862143,48.83437128 1.865896017,48.82253097 1.868949473,48.81300779 1.885072705,48.80543298 1.885899951,48.80431637 1.875821511,48.80504951 1.872623707,48.79865124"/>
<polygon id="78466 ORGEVAL" points="1.981887669,48.90029289 1.971601492,48.8934148 1.953756576,48.89566153 1.93409451,48.9046347 1.931973587,48.90760169 1.942011279,48.91383338 1.969741349,48.94467954 1.978490145,48.94551884 1.982363841,48.92896815 1.998111832,48.92840837 2.008618147,48.9206985 1.979890821,48.90334271 1.981887669,48.90029289"/>
<polygon id="78481 LE PECQ" points="2.08422244,48.8787162 2.091815253,48.88587898 2.09925133,48.89039595 2.104127722,48.90740316 2.113204846,48.90633754 2.120242856,48.90320578 2.113065031,48.89933065 2.118188802,48.89077973 2.110267283,48.8874385 2.107096912,48.88940247 2.101094624,48.8855353 2.097451381,48.88014772 2.08422244,48.8787162"/>
<polygon id="78490 PLAISIR" points="1.985935301,48.79964836 1.97004222,48.79986324 1.956870313,48.78927043 1.941237904,48.79154348 1.914910943,48.80263145 1.913066136,48.81993795 1.917838586,48.82034101 1.921737091,48.8261236 1.930890041,48.8261788 1.94325826,48.83696487 1.968792679,48.83483127 1.970086059,48.83487839 1.966898485,48.82179131 1.986479116,48.79968895 1.985935301,48.79964836"/>
<polygon id="78498 POISSY" points="1.998373859,48.89140232 1.981887669,48.90029289 1.979890821,48.90334271 2.008618147,48.9206985 2.016906453,48.92405837 2.008405583,48.93471735 2.022226504,48.93000152 2.036390265,48.93463986 2.04726846,48.9466248 2.049002093,48.95709751 2.070157211,48.9463099 2.063219382,48.94111182 2.054601989,48.92550387 2.044986903,48.92290949 2.039885102,48.91687015 2.027028641,48.91261147 2.022166134,48.91360612 2.014347784,48.90495328 2.001322658,48.89979101 1.995659511,48.89423956 1.998373859,48.89140232"/>
<polygon id="78501 PORCHEVILLE" points="1.762926635,48.96680814 1.751753677,48.96735787 1.751987383,48.97412333 1.76219038,48.9896975 1.775457151,48.98863755 1.771521698,48.98227507 1.785987787,48.97833042 1.785941217,48.9680416 1.762926635,48.96680814"/>
<polygon id="78502 LE PORT-MARLY" points="2.109398751,48.87283545 2.104393405,48.872933 2.101094624,48.8855353 2.107096912,48.88940247 2.110267283,48.8874385 2.119794118,48.87811065 2.109398751,48.87283545"/>
<polygon id="78524 ROCQUENCOURT" points="2.112676125,48.82851124 2.100600376,48.82413987 2.091738803,48.82380307 2.08912012,48.82633746 2.102663857,48.84274592 2.110636174,48.84108762 2.120545689,48.83602536 2.112676125,48.82851124"/>
<polygon id="78545 SAINT-CYR-L'ECOLE" points="2.070251387,48.78981062 2.053611708,48.79460892 2.050125421,48.79841285 2.048458423,48.80322054 2.060286579,48.81704828 2.070680908,48.82301168 2.083174638,48.81895285 2.070251387,48.78981062"/>
<polygon id="78551 SAINT-GERMAIN-EN-LAYE" points="2.091815253,48.88587898 2.087831431,48.88441872 2.075082276,48.8874057 2.054452747,48.8976681 2.052729085,48.90693576 2.039885102,48.91687015 2.044986903,48.92290949 2.054601989,48.92550387 2.063219382,48.94111182 2.070157211,48.9463099 2.075675644,48.95231498 2.075634134,48.96617284 2.086659564,48.97377536 2.088198795,48.97714139 2.08706638,48.98405722 2.108124305,48.98229118 2.122047961,48.9870611 2.143263034,48.98570371 2.166086586,48.97684487 2.172905176,48.96386156 2.147465234,48.96525715 2.134469098,48.95584742 2.127853526,48.9431913 2.122791996,48.94217413 2.122239694,48.93202586 2.110353346,48.92071469 2.104127722,48.90740316 2.09925133,48.89039595 2.091815253,48.88587898"/>
<polygon id="78575 SAINT-REMY-LES-CHEVREUSE" points="2.082078805,48.68545492 2.069763142,48.68893057 2.066511581,48.68689924 2.055658739,48.68678681 2.055518385,48.69981965 2.066560867,48.71761773 2.07237408,48.7232489 2.073239288,48.71662638 2.087142379,48.71989975 2.100744439,48.7154876 2.105537547,48.71658502 2.107693289,48.71770753 2.110332693,48.71438114 2.097183445,48.70052006 2.097852608,48.6940307 2.089331408,48.69804071 2.082078805,48.68545492"/>
<polygon id="78576 SAINT-REMY-L'HONORE" points="1.90328857,48.73824879 1.873847305,48.73251466 1.853383382,48.73309341 1.853274633,48.7498142 1.858964194,48.75960125 1.867333741,48.76011268 1.869040323,48.76548981 1.882620924,48.76669701 1.889945589,48.77033624 1.89348425,48.76517008 1.89559543,48.74255844 1.90328857,48.73824879"/>
<polygon id="78586 SARTROUVILLE" points="2.160838792,48.92026953 2.142430773,48.93512179 2.17314149,48.95329658 2.205858347,48.94974074 2.206092558,48.94065943 2.198926853,48.93525192 2.182881354,48.93653752 2.167915863,48.92657813 2.160838792,48.92026953"/>
<polygon id="78609 TESSANCOURT-SUR-AUBETTE" points="1.907059475,49.01225586 1.905083695,49.02556507 1.91247369,49.04161205 1.937802165,49.02177633 1.931983413,49.01748915 1.919474003,49.01482328 1.914951705,49.01598751 1.907059475,49.01225586"/>
<polygon id="78621 TRAPPES" points="1.991707355,48.74756447 1.973475056,48.75341764 1.978059992,48.75963637 1.973507485,48.76560579 1.976015744,48.77230137 1.970907901,48.78565942 1.985935301,48.79964836 1.986479116,48.79968895 1.994400509,48.79911726 2.022284832,48.78526336 2.00890823,48.7678926 2.011238395,48.76196646 1.991707355,48.74756447"/>
</g>
</g>
</svg>
Related
Why doesn't the group animation work for me?
I have svg (from undraw edited in figma) with groups selected by id and I would like to have animation in css on these groups.
But I set animation for group with id head and it doesn't work (The head should tilt, but the image doesn't move at all).
Can you help me?
Thank you in advance for your reply!
#head{
animation: head 1s ease infinite alternate;
transform-origin: bottom;
}
#keyframes head{
from{
transform: rotateZ('-10deg');
}
to{
transform: rotateZ('10deg');
}
}
<div class="svg-animation">
<svg width="600" height="523" viewBox="0 0 600 523" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_developer_activity_re_39tg 1" clip-path="url(#clip0_3_67)">
// Lots of other vectors
<g id="head">
<path id="ab6171fa-7d69-4734-b81c-8dff60f9761b" d="M199.507 172.87C226.126 172.87 247.704 151.292 247.704 124.674C247.704 98.0553 226.126 76.4769 199.507 76.4769C172.889 76.4769 151.311 98.0553 151.311 124.674C151.311 151.292 172.889 172.87 199.507 172.87Z" fill="#FFB6B6"/>
<path id="bf427902-b9bf-4946-b5d7-5c1c7e04535e" d="M241.715 89.3366C241.715 89.3366 254.32 65.2383 226.587 63.0475C226.587 63.0475 202.945 41.6007 178.847 59.1267C178.847 59.1267 165.702 59.1267 158.514 74.0013C158.514 74.0013 148.176 70.0805 145.904 80.5736C145.904 80.5736 138.339 102.481 145.904 122.198C153.469 141.915 155.981 144.106 155.981 144.106C155.981 144.106 143.551 102.768 173.808 100.577C204.064 98.3866 237.923 79.4782 240.444 103.577C242.966 127.675 246.76 133.612 246.76 133.612C246.76 133.612 270.709 99.1951 241.715 89.3366Z" fill="#2F2E41"/>
<path id="Vector_42" d="M257.955 122.04H254.428C254.428 95.3746 228.038 77.901 201.415 77.8869C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.885 176.809 82.2182C159.618 87.4879 143.675 97.6743 143.675 122.04C143.671 126.772 144.273 131.485 145.467 136.064L142.052 136.953C140.786 132.083 140.146 127.072 140.148 122.04C140.148 100.75 148.888 86.1264 163.984 77.4072C171.92 72.8218 181.606 69.8661 192.702 68.427C197.32 67.8127 201.988 67.6708 206.635 68.0037C237.251 70.2047 257.955 93.6816 257.955 122.04Z" fill="#009B77"/>
<path id="Vector_43" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979C257.673 105.831 256.186 104.98 254.566 104.491C252.947 104.003 251.238 103.888 249.568 104.157L247.36 104.461C246.755 104.54 246.173 104.739 245.646 105.045C245.12 105.352 244.659 105.76 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.305 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27C250.613 137.327 250.901 137.356 251.19 137.355C251.398 137.355 251.605 137.341 251.811 137.313L254.28 136.981C255.785 136.781 257.234 136.276 258.537 135.496C259.84 134.716 260.969 133.678 261.856 132.445C262.047 132.177 262.23 131.902 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#009B77"/>
<path id="Vector_44" d="M245.935 104.891C245.287 105.206 244.724 105.67 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.306 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27L245.935 104.891Z" fill="white"/>
<path id="Vector_45" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979L262.11 130.519C262.158 130.897 262.255 131.267 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#3F3D56"/>
<path id="Vector_46" d="M252.848 131.395C253.813 131.264 254.299 128.967 253.932 126.264C253.565 123.562 252.486 121.477 251.521 121.608C250.555 121.739 250.07 124.036 250.437 126.738C250.803 129.441 251.883 131.526 252.848 131.395Z" fill="#3F3D56"/>
<path id="Vector_47" d="M250.732 118.697C251.697 118.566 252.182 116.269 251.816 113.566C251.449 110.864 250.369 108.779 249.404 108.91C248.439 109.041 247.954 111.338 248.32 114.041C248.687 116.743 249.767 118.828 250.732 118.697Z" fill="#3F3D56"/>
<path id="Vector_48" d="M264.135 123.635C265.1 123.504 265.586 121.207 265.219 118.505C264.852 115.802 263.773 113.717 262.808 113.848C261.842 113.979 261.357 116.276 261.724 118.979C262.09 121.681 263.17 123.766 264.135 123.635Z" fill="#3F3D56"/>
<path id="Vector_49" d="M201.415 77.8868C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.8849 176.809 82.2182C170.002 81.8867 164.993 80.1231 163.984 77.4071C171.92 72.8218 181.606 69.866 192.702 68.4269C197.32 67.8126 201.988 67.6708 206.635 68.0037C207.127 68.292 207.552 68.6812 207.883 69.1457C208.213 69.6101 208.442 70.1393 208.554 70.6984C208.885 73.1534 206.085 75.7635 201.415 77.8868Z" fill="#3F3D56"/>
<path id="Vector_50" d="M156.38 146.519L150.948 123.938C150.754 123.123 150.324 122.384 149.711 121.813C149.099 121.242 148.331 120.864 147.505 120.728C147.272 120.692 147.036 120.673 146.8 120.672C146.467 120.673 146.136 120.713 145.812 120.791L143.71 121.299C141.003 121.954 138.667 123.656 137.213 126.031C135.76 128.406 135.308 131.261 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18C142.464 150.427 142.784 150.655 143.117 150.864C144.3 151.605 145.619 152.102 146.996 152.325C148.374 152.548 149.782 152.493 151.138 152.162L153.233 151.654C153.787 151.525 154.309 151.282 154.764 150.942C155.442 150.448 155.957 149.764 156.245 148.976C156.532 148.188 156.579 147.333 156.38 146.519Z" fill="#009B77"/>
<path id="Vector_51" d="M144.992 142.317C145.939 142.089 146.19 139.755 145.552 137.104C144.914 134.452 143.629 132.487 142.682 132.715C141.735 132.943 141.484 135.277 142.122 137.929C142.76 140.58 144.045 142.545 144.992 142.317Z" fill="#3F3D56"/>
<path id="Vector_52" d="M137.938 144.434C138.885 144.206 139.135 141.871 138.497 139.22C137.859 136.568 136.574 134.604 135.627 134.832C134.68 135.059 134.43 137.394 135.068 140.045C135.706 142.697 136.991 144.661 137.938 144.434Z" fill="#3F3D56"/>
<path id="Vector_53" d="M156.725 146.434L151.293 123.853C151.082 122.972 150.615 122.172 149.951 121.555C149.287 120.937 148.456 120.53 147.562 120.382L154.976 151.224C155.708 150.688 156.265 149.947 156.576 149.094C156.888 148.242 156.94 147.316 156.725 146.434Z" fill="white"/>
<path id="Vector_54" d="M137.185 129.497C137.035 128.869 136.753 128.28 136.359 127.768C135.596 129.746 135.455 131.909 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18L137.185 129.497Z" fill="#3F3D56"/>
</g>
</g>
<defs>
<clipPath id="clip0_3_67">
<rect width="600" height="522.608" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
SVG image mask is adding opacity to the image
I'm using an SVG image mask on this but as you can see, the image is getting some opacity added for some reason <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584"> <defs> <mask id="image-mask"> <path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#F71A3A"/> <path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#F71A3A"/> </mask> </defs> <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image> </svg> What am I missing?
The color of the mask need to be white (#fff). The fill coloration control the opacity. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 584"> <defs> <mask id="image-mask"> <path d="M427.777 -30.7596C413.367 -43.7205 393.837 -51 373.474 -51C353.112 -51 333.582 -43.7205 319.172 -30.7596L186.599 88.7518L57.088 -27.8804C42.6897 -40.8555 23.1599 -48.1461 2.7951 -48.1483C-17.5697 -48.1506 -37.1015 -40.8643 -51.5033 -27.8924C-65.9052 -14.9205 -73.9975 2.67447 -74 21.0218C-74.0025 39.3691 -65.915 56.9658 -51.5167 69.9409C-51.5167 69.9409 183.456 281.251 186.599 283.291C189.661 281.251 427.83 67.0857 427.83 67.0857C442.209 54.0967 450.28 36.498 450.27 18.1531C450.26 -0.191704 442.17 -17.7833 427.777 -30.7596Z" fill="#fff"/> <path d="M427.84 269.95C413.436 256.977 393.904 249.689 373.537 249.689C353.171 249.689 333.638 256.977 319.235 269.95L186.662 389.437L57.151 272.901C42.7526 259.926 23.2229 252.635 2.85806 252.633C-17.5068 252.631 -37.0385 259.917 -51.4404 272.889C-65.8423 285.861 -73.9346 303.456 -73.9371 321.803C-73.9396 340.15 -65.8521 357.747 -51.4537 370.722C-51.4537 370.722 183.519 581.937 186.662 584C189.724 581.937 427.893 367.771 427.893 367.771C442.277 354.789 450.351 337.193 450.341 318.85C450.331 300.508 442.238 282.919 427.84 269.95Z" fill="#fff"/> </mask> </defs> <image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" xlink:href="https://s3-alpha-sig.figma.com/img/a2d4/3227/98bd02959256888dec574d041bcd431d?Expires=1618790400&Signature=Svl6SgWri7Ox-cYHxVFXJQxaSL2p~b31tyENTYKqD0o7Nmw-zE7qbn9avo9u~Z5CA0erGfMZgV2atoUgNAu6hNNBY80YfenEQp2Ltb1XeufR71FyYyLjgS4HYsJ1gbYXP4QUXfh2cPHg7uKnn6oo2nyv7wWOBFSYjweAIlu1mCEaHReT5af5kBoDH024XKFFdfRkn-~HIZ9U~QhJbD4YLHv1k-wJkvmHelKX242ROX5iDjlibCGd8O3mG~D0xID4fDVHrbNCMpkmMWG~L50MAFV-cHdqxKsmejDRIwVBnfhcT5WfNHgDqev0N3L4~1D7PxdLzc6lelDEsw7Y2UV7Ww__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA" mask="url(#image-mask)"></image> </svg> For more detail refer to the specification: https://drafts.fxtf.org/css-masking-1/#MaskValues. The color value is used in combination with mask-type and the default configuration is luminance so we use black to define the invisible part and white the visible one
Can't color all letters in my SVG logo image
My SVG logo image comes with some letters defined within a <polygon> tag, others within a <path> tag. svg polygon, svg path { fill: red; } does work on some letters, but not all of them. I have no idea why, they look the same in the markup only the numbers are different. Any suggestion?
Content of the SVG image in question:
svg polygon,
svg path {
fill: red;
}
<svg width="131px" height="19px" viewBox="0 0 131 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>IW_logo_oneline</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0 18.1285706 130.219504 18.1285706 130.219504 0.000335294118 0 0.000335294118"></polygon>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="IW_logo_oneline">
<g id="Logo">
<path d="M13.6164042,13.8475353 C13.6164042,16.0604765 11.9497319,17.8543 9.77116891,17.8543 L4.80968151,17.8543 L4.80968151,0.251358824 L9.77116891,0.251358824 C11.9497319,0.251358824 13.6164042,2.04406471 13.6164042,4.25700588 L13.6164042,13.8475353 Z M8.20026975,14.4790059 C8.20026975,14.4790059 9.00498403,14.4801235 9.02149664,14.4801235 C9.72273193,14.4801235 10.2907655,13.9045353 10.2907655,13.1925941 L10.2907655,4.78341765 C10.2907655,4.07147647 9.72273193,3.49588824 9.02149664,3.49588824 L8.20026975,3.49588824 L8.20026975,14.4790059 Z" id="Fill-1" fill="#43484D"></path>
<polygon id="Fill-3" fill="#43484D" points="26.887805 8.24186471 29.7323765 17.8547471 33.6029311 17.8547471 33.6029311 0.251805882 30.2772924 0.251805882 30.2772924 9.86357059 27.4338218 0.251805882 23.5621664 0.251805882 23.5621664 17.8547471 26.887805 17.8547471"></polygon>
<polygon id="Fill-5" fill="#43484D" points="22.470463 14.4795647 18.216816 14.4795647 18.216816 10.2515059 22.0026059 10.2515059 22.0026059 7.01032941 18.216816 7.01032941 18.216816 3.49644706 22.470463 3.49644706 22.470463 0.251917647 14.8273286 0.251917647 14.8273286 17.8548588 22.470463 17.8548588"></polygon>
<polygon id="Fill-7" fill="#43484D" points="37.2641059 17.8531824 40.6546941 17.8531824 40.6546941 3.49588824 43.4100975 3.49588824 43.4100975 0.251358824 34.5087025 0.251358824 34.5087025 3.49588824 37.2641059 3.49588824"></polygon>
<polygon id="Fill-9" fill="#43484D" points="57.5070185 0.251358824 48.6067244 0.251358824 48.6067244 3.49588824 51.3610269 3.49588824 51.3610269 17.8531824 54.7516151 17.8531824 54.7516151 3.49588824 57.5070185 3.49588824"></polygon>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-12"></g>
<polygon id="Fill-11" fill="#43484D" mask="url(#mask-2)" points="0 17.8536294 3.39058824 17.8536294 3.39058824 0.251805882 0 0.251805882"></polygon>
<polygon id="Fill-13" fill="#43484D" mask="url(#mask-2)" points="44.3132269 17.8536294 47.7038151 17.8536294 47.7038151 0.251805882 44.3132269 0.251805882"></polygon>
<polygon id="Fill-14" fill="#43484D" mask="url(#mask-2)" points="64.9721471 0.251358824 63.2229118 6.68900588 61.2997437 0.251358824 57.8442059 0.251358824 61.4736765 11.5496529 61.4736765 17.8531824 64.9721471 17.8531824 64.9721471 11.5496529 68.5146513 0.251358824"></polygon>
<path d="M90.2172782,0.000335294118 L90.2062697,0.000335294118 L90.1952613,0.000335294118 C87.4772866,0.000335294118 85.508984,1.60304118 85.508984,4.93921765 C85.508984,4.95821765 85.5078832,4.97498235 85.5078832,4.99398235 L85.5078832,13.0891 C85.5078832,13.1058647 85.508984,13.1215118 85.508984,13.1382765 C85.5067824,16.1950412 87.2802361,18.1073353 90.1952613,18.1073353 C90.1985639,18.1073353 90.2018664,18.1062176 90.2062697,18.1062176 C90.2095723,18.1062176 90.2128748,18.1073353 90.2172782,18.1073353 C93.1312025,18.1073353 94.906858,16.1950412 94.9035555,13.1382765 C94.9046563,13.1215118 94.9046563,13.1058647 94.9046563,13.0891 L94.9046563,4.99398235 C94.9046563,4.97498235 94.9035555,4.95821765 94.9035555,4.93921765 C94.9035555,1.60304118 92.9352529,0.000335294118 90.2172782,0.000335294118 L90.2172782,0.000335294118 Z M91.4127908,13.3696294 C91.4127908,13.8558059 91.3335303,14.7622176 90.2260849,14.7678059 L90.1875555,14.7678059 C89.0801101,14.7622176 89.0008496,13.8558059 89.0008496,13.3696294 L89.0008496,4.73580588 C89.0008496,4.11662941 89.0801101,3.31974706 90.1875555,3.31639412 L90.2260849,3.31639412 C91.3335303,3.31974706 91.4127908,4.11662941 91.4127908,4.73580588 L91.4127908,13.3696294 Z" id="Fill-15" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-16" fill="#43484D" mask="url(#mask-2)" points="80.4849689 8.22767059 79.2212042 0.251023529 76.8268765 0.251023529 75.5631118 8.22767059 74.2751286 0.251023529 70.8889437 0.251023529 73.7786496 17.8539647 76.7586244 17.8539647 78.0245908 9.42467059 79.2894563 17.8539647 82.2694311 17.8539647 85.159137 0.251023529 81.7718513 0.251023529"></polygon>
<path d="M105.230208,5.13447059 C105.230208,2.22747059 103.845351,0.252588235 101.566612,0.252588235 L96.1669899,0.252588235 L96.1669899,17.8544118 L99.5553765,17.8544118 L99.5553765,9.68441176 L99.8922336,9.68441176 L102.360318,17.8488235 L105.956763,17.8510588 L103.103385,9.234 C104.658872,8.53211765 105.230208,6.82211765 105.230208,5.13447059 M100.504301,7.011 L99.5553765,7.011 L99.5553765,3.496 L100.5032,3.496 C101.659082,3.496 101.906771,4.08611765 101.906771,5.19147059 C101.906771,6.29794118 101.657982,7.011 100.504301,7.011" id="Fill-17" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-18" fill="#43484D" mask="url(#mask-2)" points="116.345063 0.251358824 112.755223 0.251358824 109.946979 6.97512353 109.946979 0.259182353 106.558592 0.259182353 106.558592 17.8543 109.946979 17.8543 109.946979 8.51971176 112.768433 17.8453588 116.345063 17.8498294 113.114097 7.70047647"></polygon>
<path d="M116.363337,4.88892353 C116.363337,4.86768824 116.363337,4.84757059 116.364438,4.82521765 C116.363337,4.80733529 116.363337,4.78945294 116.363337,4.77157059 C116.362236,4.75257059 116.362236,4.90904118 116.363337,4.88892353" id="Fill-19" fill="#43484D" mask="url(#mask-2)"></path>
<path d="M125.200113,13.3029059 C125.200113,13.3219059 125.201213,13.3386706 125.201213,13.3576706 L125.201213,13.2392 C125.201213,13.2604353 125.200113,13.2805529 125.200113,13.3029059" id="Fill-20" fill="#43484D" mask="url(#mask-2)"></path>
<path d="M124.027277,9.87798824 C123.83463,9.64104706 123.544008,9.34375294 123.207151,9.0174 L123.201647,9.0174 C122.821857,8.65081176 122.345193,8.19816471 121.911462,7.78128235 C120.115992,6.05675294 119.775832,5.84998824 119.753815,4.59263529 C119.764824,3.99916471 119.877109,3.31181176 120.906395,3.30734118 L120.927311,3.30734118 C122.033655,3.31181176 122.114017,4.10757647 122.114017,4.72787059 L122.114017,5.57392941 L125.133622,5.57392941 C125.133622,5.57392941 125.132521,4.94916471 125.132521,4.93016471 C125.132521,1.77616471 123.804908,0.172341176 121.321412,0.00692941176 C121.321412,0.00692941176 120.999966,-0.00201176471 120.938319,0.000223529412 C120.877773,-0.00201176471 120.545319,0.00692941176 120.545319,0.00692941176 C118.080538,0.171223529 116.388546,1.71469412 116.364328,4.82510588 C116.375336,6.26016471 116.83879,7.36887059 117.469571,8.16575294 C117.469571,8.16575294 117.514706,8.22275294 117.536723,8.25069412 C117.739277,8.50216471 118.054118,8.81957647 118.416294,9.1694 L118.421798,9.1694 C118.782874,9.51698824 119.233118,9.94392941 119.652538,10.3462824 C121.446908,12.0719294 121.788168,12.2775765 121.809084,13.5349294 C121.799176,14.1295176 121.686891,14.8168706 120.657605,14.8213412 L120.635588,14.8213412 C119.528143,14.8168706 119.449983,14.0199882 119.449983,13.4008118 L119.449983,12.5547529 L116.329101,12.5547529 C116.329101,12.5547529 116.330202,13.1795176 116.330202,13.1974 C116.330202,16.3525176 117.759092,17.9574588 120.242588,18.1217529 C120.242588,18.1217529 120.631185,18.1306941 120.692832,18.1284588 C120.753378,18.1306941 121.018681,18.1217529 121.018681,18.1217529 C123.483462,17.9574588 125.176555,16.4139882 125.199672,13.3024588 C125.188664,11.8685176 124.72521,10.7598118 124.095529,9.96292941 L124.027277,9.87798824" id="Fill-21" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-22" fill="#43484D" mask="url(#mask-2)" points="126.895517 12.3970529 129.82155 12.3970529 130.220055 0.259405882 126.498113 0.259405882"></polygon>
<polygon id="Fill-23" fill="#43484D" mask="url(#mask-2)" points="126.562513 17.8502765 130.156756 17.8502765 130.156756 14.2011588 126.562513 14.2011588"></polygon>
</g>
</g>
</g>
</svg>
The mask element is your problem. It's overlaying some of your letters with a white opacity mask so they appear not to change properly. Not sure what the intention of it is or if it's something that shouldn't be there but if you remove it everything works fine.
svg polygon,
svg path {
fill: red;
}
<svg width="131px" height="19px" viewBox="0 0 131 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>IW_logo_oneline</title>
<desc>Created with Sketch.</desc>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="IW_logo_oneline">
<g id="Logo">
<path d="M13.6164042,13.8475353 C13.6164042,16.0604765 11.9497319,17.8543 9.77116891,17.8543 L4.80968151,17.8543 L4.80968151,0.251358824 L9.77116891,0.251358824 C11.9497319,0.251358824 13.6164042,2.04406471 13.6164042,4.25700588 L13.6164042,13.8475353 Z M8.20026975,14.4790059 C8.20026975,14.4790059 9.00498403,14.4801235 9.02149664,14.4801235 C9.72273193,14.4801235 10.2907655,13.9045353 10.2907655,13.1925941 L10.2907655,4.78341765 C10.2907655,4.07147647 9.72273193,3.49588824 9.02149664,3.49588824 L8.20026975,3.49588824 L8.20026975,14.4790059 Z" id="Fill-1" fill="#43484D"></path>
<polygon id="Fill-3" fill="#43484D" points="26.887805 8.24186471 29.7323765 17.8547471 33.6029311 17.8547471 33.6029311 0.251805882 30.2772924 0.251805882 30.2772924 9.86357059 27.4338218 0.251805882 23.5621664 0.251805882 23.5621664 17.8547471 26.887805 17.8547471"></polygon>
<polygon id="Fill-5" fill="#43484D" points="22.470463 14.4795647 18.216816 14.4795647 18.216816 10.2515059 22.0026059 10.2515059 22.0026059 7.01032941 18.216816 7.01032941 18.216816 3.49644706 22.470463 3.49644706 22.470463 0.251917647 14.8273286 0.251917647 14.8273286 17.8548588 22.470463 17.8548588"></polygon>
<polygon id="Fill-7" fill="#43484D" points="37.2641059 17.8531824 40.6546941 17.8531824 40.6546941 3.49588824 43.4100975 3.49588824 43.4100975 0.251358824 34.5087025 0.251358824 34.5087025 3.49588824 37.2641059 3.49588824"></polygon>
<polygon id="Fill-9" fill="#43484D" points="57.5070185 0.251358824 48.6067244 0.251358824 48.6067244 3.49588824 51.3610269 3.49588824 51.3610269 17.8531824 54.7516151 17.8531824 54.7516151 3.49588824 57.5070185 3.49588824"></polygon>
<polygon id="Fill-11" fill="#43484D" mask="url(#mask-2)" points="0 17.8536294 3.39058824 17.8536294 3.39058824 0.251805882 0 0.251805882"></polygon>
<polygon id="Fill-13" fill="#43484D" mask="url(#mask-2)" points="44.3132269 17.8536294 47.7038151 17.8536294 47.7038151 0.251805882 44.3132269 0.251805882"></polygon>
<polygon id="Fill-14" fill="#43484D" mask="url(#mask-2)" points="64.9721471 0.251358824 63.2229118 6.68900588 61.2997437 0.251358824 57.8442059 0.251358824 61.4736765 11.5496529 61.4736765 17.8531824 64.9721471 17.8531824 64.9721471 11.5496529 68.5146513 0.251358824"></polygon>
<path d="M90.2172782,0.000335294118 L90.2062697,0.000335294118 L90.1952613,0.000335294118 C87.4772866,0.000335294118 85.508984,1.60304118 85.508984,4.93921765 C85.508984,4.95821765 85.5078832,4.97498235 85.5078832,4.99398235 L85.5078832,13.0891 C85.5078832,13.1058647 85.508984,13.1215118 85.508984,13.1382765 C85.5067824,16.1950412 87.2802361,18.1073353 90.1952613,18.1073353 C90.1985639,18.1073353 90.2018664,18.1062176 90.2062697,18.1062176 C90.2095723,18.1062176 90.2128748,18.1073353 90.2172782,18.1073353 C93.1312025,18.1073353 94.906858,16.1950412 94.9035555,13.1382765 C94.9046563,13.1215118 94.9046563,13.1058647 94.9046563,13.0891 L94.9046563,4.99398235 C94.9046563,4.97498235 94.9035555,4.95821765 94.9035555,4.93921765 C94.9035555,1.60304118 92.9352529,0.000335294118 90.2172782,0.000335294118 L90.2172782,0.000335294118 Z M91.4127908,13.3696294 C91.4127908,13.8558059 91.3335303,14.7622176 90.2260849,14.7678059 L90.1875555,14.7678059 C89.0801101,14.7622176 89.0008496,13.8558059 89.0008496,13.3696294 L89.0008496,4.73580588 C89.0008496,4.11662941 89.0801101,3.31974706 90.1875555,3.31639412 L90.2260849,3.31639412 C91.3335303,3.31974706 91.4127908,4.11662941 91.4127908,4.73580588 L91.4127908,13.3696294 Z" id="Fill-15" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-16" fill="#43484D" mask="url(#mask-2)" points="80.4849689 8.22767059 79.2212042 0.251023529 76.8268765 0.251023529 75.5631118 8.22767059 74.2751286 0.251023529 70.8889437 0.251023529 73.7786496 17.8539647 76.7586244 17.8539647 78.0245908 9.42467059 79.2894563 17.8539647 82.2694311 17.8539647 85.159137 0.251023529 81.7718513 0.251023529"></polygon>
<path d="M105.230208,5.13447059 C105.230208,2.22747059 103.845351,0.252588235 101.566612,0.252588235 L96.1669899,0.252588235 L96.1669899,17.8544118 L99.5553765,17.8544118 L99.5553765,9.68441176 L99.8922336,9.68441176 L102.360318,17.8488235 L105.956763,17.8510588 L103.103385,9.234 C104.658872,8.53211765 105.230208,6.82211765 105.230208,5.13447059 M100.504301,7.011 L99.5553765,7.011 L99.5553765,3.496 L100.5032,3.496 C101.659082,3.496 101.906771,4.08611765 101.906771,5.19147059 C101.906771,6.29794118 101.657982,7.011 100.504301,7.011" id="Fill-17" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-18" fill="#43484D" mask="url(#mask-2)" points="116.345063 0.251358824 112.755223 0.251358824 109.946979 6.97512353 109.946979 0.259182353 106.558592 0.259182353 106.558592 17.8543 109.946979 17.8543 109.946979 8.51971176 112.768433 17.8453588 116.345063 17.8498294 113.114097 7.70047647"></polygon>
<path d="M116.363337,4.88892353 C116.363337,4.86768824 116.363337,4.84757059 116.364438,4.82521765 C116.363337,4.80733529 116.363337,4.78945294 116.363337,4.77157059 C116.362236,4.75257059 116.362236,4.90904118 116.363337,4.88892353" id="Fill-19" fill="#43484D" mask="url(#mask-2)"></path>
<path d="M125.200113,13.3029059 C125.200113,13.3219059 125.201213,13.3386706 125.201213,13.3576706 L125.201213,13.2392 C125.201213,13.2604353 125.200113,13.2805529 125.200113,13.3029059" id="Fill-20" fill="#43484D" mask="url(#mask-2)"></path>
<path d="M124.027277,9.87798824 C123.83463,9.64104706 123.544008,9.34375294 123.207151,9.0174 L123.201647,9.0174 C122.821857,8.65081176 122.345193,8.19816471 121.911462,7.78128235 C120.115992,6.05675294 119.775832,5.84998824 119.753815,4.59263529 C119.764824,3.99916471 119.877109,3.31181176 120.906395,3.30734118 L120.927311,3.30734118 C122.033655,3.31181176 122.114017,4.10757647 122.114017,4.72787059 L122.114017,5.57392941 L125.133622,5.57392941 C125.133622,5.57392941 125.132521,4.94916471 125.132521,4.93016471 C125.132521,1.77616471 123.804908,0.172341176 121.321412,0.00692941176 C121.321412,0.00692941176 120.999966,-0.00201176471 120.938319,0.000223529412 C120.877773,-0.00201176471 120.545319,0.00692941176 120.545319,0.00692941176 C118.080538,0.171223529 116.388546,1.71469412 116.364328,4.82510588 C116.375336,6.26016471 116.83879,7.36887059 117.469571,8.16575294 C117.469571,8.16575294 117.514706,8.22275294 117.536723,8.25069412 C117.739277,8.50216471 118.054118,8.81957647 118.416294,9.1694 L118.421798,9.1694 C118.782874,9.51698824 119.233118,9.94392941 119.652538,10.3462824 C121.446908,12.0719294 121.788168,12.2775765 121.809084,13.5349294 C121.799176,14.1295176 121.686891,14.8168706 120.657605,14.8213412 L120.635588,14.8213412 C119.528143,14.8168706 119.449983,14.0199882 119.449983,13.4008118 L119.449983,12.5547529 L116.329101,12.5547529 C116.329101,12.5547529 116.330202,13.1795176 116.330202,13.1974 C116.330202,16.3525176 117.759092,17.9574588 120.242588,18.1217529 C120.242588,18.1217529 120.631185,18.1306941 120.692832,18.1284588 C120.753378,18.1306941 121.018681,18.1217529 121.018681,18.1217529 C123.483462,17.9574588 125.176555,16.4139882 125.199672,13.3024588 C125.188664,11.8685176 124.72521,10.7598118 124.095529,9.96292941 L124.027277,9.87798824" id="Fill-21" fill="#43484D" mask="url(#mask-2)"></path>
<polygon id="Fill-22" fill="#43484D" mask="url(#mask-2)" points="126.895517 12.3970529 129.82155 12.3970529 130.220055 0.259405882 126.498113 0.259405882"></polygon>
<polygon id="Fill-23" fill="#43484D" mask="url(#mask-2)" points="126.562513 17.8502765 130.156756 17.8502765 130.156756 14.2011588 126.562513 14.2011588"></polygon>
</g>
</g>
</g>
</svg>
I also removed the <defs> element as <mask> was using the only element defined within <defs>.
Delete mask="url(#mask-2)". Also you have a #path-1 polygon as a mask of this text. Erase them if your final result has to show full opacity of the text.
CSS cannot select <g> tag to change fill attribute in SVG object
I have a code like this in my HTML:
<a href="#">
<object type="image/svg+xml" class="nav-logo" width="204" height="34" data="img/wp/logo-white.svg">nav-logo</object>
</a>
I need to change the fill color upon scrolling so I make a class which will select the <g> tag inside the SVG image and change the fill attribute's value but it doesn't seem to work no matter what I tried.
Here's the body of the SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>emissaries-logo</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="emissaries-logo" fill="#FFFFFF">
<path d="M44.762,42.7358 L15.313,42.7358 C15.206,44.1288 15.1,45.9488 15.1,47.8738 C15.1,59.7608 20.347,64.7938 28.7,64.7938 C34.375,64.7938 40.694,61.4758 43.479,57.8358 C43.799,57.4078 45.727,58.8008 45.727,60.2978 C45.727,60.6208 45.62,60.8348 45.406,61.1528 C41.979,66.1858 35.232,72.2938 24.952,72.2938 C10.817,72.2938 0,61.2628 0,47.6598 C0,33.6338 9.746,22.0658 24.952,22.0658 C38.98,22.0658 46.796,31.8138 46.796,41.2388 C46.796,42.1988 45.941,42.7358 44.762,42.7358 M25.166,26.2438 C19.919,26.2438 16.813,31.4908 15.848,38.7718 L27.628,38.4538 C31.913,38.3438 32.982,37.3798 32.982,34.8128 C32.982,30.0978 30.199,26.2438 25.166,26.2438" id="Fill-1"></path>
<path d="M155.6013,15.4228 C159.7763,15.4228 163.2033,11.8868 163.2033,7.6038 C163.2033,2.6298 158.3443,-1.2802 153.1483,0.3928 C150.6603,1.1938 148.6583,3.3068 148.0863,5.8568 C146.9593,10.8798 150.8663,15.4228 155.6013,15.4228" id="Fill-3"></path>
<path d="M170.1641,66.8327 C164.3821,66.1867 162.8841,64.6887 162.8841,57.8357 L162.8841,41.0197 C162.8841,35.4547 163.4181,27.0987 163.7401,22.7117 C163.7401,22.0657 163.0961,21.5337 161.8111,21.5337 C160.9561,21.5337 160.3141,22.1747 159.8841,22.3887 C155.7091,24.8507 148.3211,27.7457 142.3231,29.0287 C141.8951,29.0287 141.4661,30.0977 141.4661,30.8487 C141.4661,31.5997 141.8951,32.5647 142.3231,32.6687 C147.4631,33.0967 148.9611,34.2757 148.9611,39.9507 L148.9611,57.8357 C148.9611,64.6887 147.3561,66.1867 141.6811,66.8327 C141.6431,66.8417 141.4931,66.8417 141.4481,66.8327 C135.2381,66.1867 134.2731,64.6887 134.2731,57.8357 L134.2731,37.9167 C134.2731,29.4567 128.9181,22.0657 118.1031,22.0657 C111.6771,22.0657 105.7891,25.1737 101.0761,31.3857 C98.8291,25.6017 92.9381,22.0657 85.5491,22.0657 C79.7651,22.0657 74.3041,25.0647 70.1281,31.0627 L70.5551,22.4987 C70.5551,21.8517 69.9151,21.3197 68.6281,21.3197 C67.7731,21.3197 67.1291,21.9607 66.7001,22.1747 C62.8471,24.5327 55.4561,27.3127 50.4231,28.6007 C49.8891,28.6007 49.5671,29.6697 49.5671,30.4207 C49.5671,31.1717 49.8891,32.1317 50.4231,32.2417 C55.4561,32.6687 56.3141,33.8477 56.3141,39.5227 L56.3141,57.8357 C56.3141,64.6887 55.3491,66.1867 49.1391,66.8327 C48.6031,66.9367 48.2811,68.0067 48.2811,68.7577 C48.2811,69.6127 48.6031,70.6867 49.1391,70.6867 C53.6361,70.6867 57.6001,70.1497 62.7401,70.1497 C67.8801,70.1497 71.2001,70.6867 75.6951,70.6867 C76.1251,70.6867 76.5541,69.6127 76.5541,68.7577 C76.5541,68.0067 76.1251,66.9367 75.6951,66.8327 C71.0901,66.3997 70.3421,64.5797 70.3421,57.8357 L70.3421,36.8467 C73.0211,32.3457 75.4831,29.7797 80.0881,29.7797 C86.1901,29.7797 88.4411,33.6347 88.4411,40.4877 L88.4411,57.8357 C88.4411,64.5797 87.5831,66.3997 83.0851,66.8327 C82.6571,66.9367 82.2281,68.0067 82.2281,68.7577 C82.2281,69.6127 82.6571,70.6867 83.0851,70.6867 C87.5831,70.6867 91.0111,70.1497 96.1491,70.1497 C101.1841,70.1497 103.1111,70.6867 107.6101,70.6867 C108.0371,70.6867 108.4641,69.6127 108.4641,68.7577 C108.4641,68.0067 108.0371,66.9367 107.6101,66.8327 C103.0041,66.3997 102.2551,64.5797 102.2551,57.8357 L102.2551,35.7727 C104.9311,31.9177 107.5021,29.7797 112.5351,29.7797 C118.6371,29.7797 120.3521,33.6347 120.3521,40.4877 L120.3521,57.8357 C120.3521,64.5797 119.6031,66.3997 115.1041,66.8327 C114.5701,66.9367 114.2481,68.0067 114.2481,68.7577 C114.2481,69.6127 114.5701,70.6867 115.1041,70.6867 C119.6031,70.6867 122.8161,70.1497 127.9561,70.1497 C133.0961,70.1497 136.9511,70.6867 141.4481,70.6867 L141.6811,70.6867 C146.1771,70.6867 150.4611,70.1497 155.6011,70.1497 C160.7421,70.1497 165.6671,70.6867 170.1641,70.6867 C170.5951,70.6867 171.0221,69.6127 171.0221,68.7577 C171.0221,68.0067 170.5951,66.9367 170.1641,66.8327" id="Fill-5"></path>
<path d="M192.0862,72.2936 C185.1252,72.2936 181.5922,69.8266 176.1312,69.8266 C175.7032,66.0816 174.8452,59.5466 174.3102,56.7666 C174.2032,56.3336 175.3802,55.9056 176.1312,55.9056 C176.9862,55.9056 177.9512,56.2296 178.1652,56.7666 C180.4132,62.9736 186.0902,68.0066 191.6582,68.0066 C196.4782,68.0066 199.0462,65.2266 199.0462,60.6206 C199.0462,50.6586 175.1662,52.5886 175.1662,36.7376 C175.1662,28.2776 184.2702,21.9606 194.0132,21.9606 C199.7972,21.9606 204.2942,23.9956 207.8272,23.9956 C207.9342,27.7456 208.1502,32.8826 208.4712,35.9916 C208.4712,36.5236 207.2932,36.8466 206.5442,36.8466 C205.6862,36.8466 204.7242,36.6326 204.6142,35.9916 C203.4382,30.2076 199.3672,26.2436 194.8712,26.2436 C189.9452,26.2436 187.3732,28.4916 187.3732,32.5646 C187.3732,42.3076 211.6842,41.7706 211.6842,55.9056 C211.6842,65.5446 203.2242,72.2936 192.0862,72.2936" id="Fill-7"></path>
<path d="M232.6671,72.2936 C225.7061,72.2936 222.1731,69.8266 216.7121,69.8266 C216.2841,66.0816 215.4261,59.5466 214.8911,56.7666 C214.7841,56.3336 215.9611,55.9056 216.7121,55.9056 C217.5671,55.9056 218.5321,56.2296 218.7461,56.7666 C220.9941,62.9736 226.6711,68.0066 232.2391,68.0066 C237.0611,68.0066 239.6271,65.2266 239.6271,60.6206 C239.6271,50.6586 215.7471,52.5886 215.7471,36.7376 C215.7471,28.2776 224.8511,21.9606 234.5941,21.9606 C240.3781,21.9606 244.8751,23.9956 248.4111,23.9956 C248.5151,27.7456 248.7341,32.8826 249.0521,35.9916 C249.0521,36.5236 247.8741,36.8466 247.1271,36.8466 C246.2671,36.8466 245.3071,36.6326 245.1981,35.9916 C244.0191,30.2076 239.9511,26.2436 235.4551,26.2436 C230.5261,26.2436 227.9551,28.4916 227.9551,32.5646 C227.9551,42.3076 252.2651,41.7706 252.2651,55.9056 C252.2651,65.5446 243.8051,72.2936 232.6671,72.2936" id="Fill-9"></path>
<path d="M417.3705,42.7358 L387.9215,42.7358 C387.8125,44.1288 387.7035,45.9488 387.7035,47.8738 C387.7035,59.7608 392.9555,64.7938 401.3055,64.7938 C406.9805,64.7938 413.2975,61.4758 416.0825,57.8358 C416.4055,57.4078 418.3305,58.8008 418.3305,60.2978 C418.3305,60.6208 418.2255,60.8348 418.0125,61.1528 C414.5855,66.1858 407.8365,72.2938 397.5555,72.2938 C383.4215,72.2938 372.6085,61.2628 372.6085,47.6598 C372.6085,33.6338 382.3515,22.0658 397.5555,22.0658 C411.5865,22.0658 419.4045,31.8138 419.4045,41.2388 C419.4045,42.1988 418.5495,42.7358 417.3705,42.7358 M397.7695,26.2438 C392.5225,26.2438 389.4195,31.4908 388.4545,38.7718 L400.2365,38.4538 C404.5185,38.3438 405.5885,37.3798 405.5885,34.8128 C405.5885,30.0978 402.8025,26.2438 397.7695,26.2438" id="Fill-11"></path>
<path d="M441.8253,72.2936 C434.8623,72.2936 431.3263,69.8266 425.8653,69.8266 C425.4373,66.0816 424.5823,59.5466 424.0453,56.7666 C423.9403,56.3336 425.1193,55.9056 425.8653,55.9056 C426.7253,55.9056 427.6853,56.2296 427.9043,56.7666 C430.1523,62.9736 435.8273,68.0066 441.3933,68.0066 C446.2123,68.0066 448.7833,65.2266 448.7833,60.6206 C448.7833,50.6586 424.9053,52.5886 424.9053,36.7376 C424.9053,28.2776 434.0073,21.9606 443.7503,21.9606 C449.5343,21.9606 454.0303,23.9956 457.5663,23.9956 C457.6713,27.7456 457.8853,32.8826 458.2083,35.9916 C458.2083,36.5236 457.0293,36.8466 456.2783,36.8466 C455.4233,36.8466 454.4583,36.6326 454.3543,35.9916 C453.1753,30.2076 449.1063,26.2436 444.6063,26.2436 C439.6813,26.2436 437.1103,28.4916 437.1103,32.5646 C437.1103,42.3076 461.4213,41.7706 461.4213,55.9056 C461.4213,65.5446 452.9613,72.2936 441.8253,72.2936" id="Fill-13"></path>
<path d="M373.1439,66.8327 C367.3649,66.1867 365.8629,64.6887 365.8629,57.8357 L365.8629,41.0207 C365.8629,35.4547 366.3999,27.0987 366.7179,22.7117 C366.7179,22.0657 366.0769,21.5337 364.7929,21.5337 C363.9329,21.5337 363.2909,22.1747 362.8639,22.3887 C358.6859,24.8507 351.2999,27.7457 345.3019,29.0287 C344.8739,29.0287 344.4459,30.0977 344.4459,30.8487 C344.4459,31.5997 344.8739,32.5647 345.3019,32.6687 C350.4449,33.0967 351.9419,34.2757 351.9419,39.9507 L351.9419,57.8357 C351.9419,64.6887 350.3349,66.1867 344.6599,66.8327 C344.2329,66.9367 343.8049,68.0067 343.8049,68.7577 C343.8049,69.6127 344.2329,70.6867 344.6599,70.6867 C349.1569,70.6867 353.4389,70.1497 358.5809,70.1497 C363.7189,70.1497 368.6479,70.6867 373.1439,70.6867 C373.5719,70.6867 373.9999,69.6127 373.9999,68.7577 C373.9999,68.0067 373.5719,66.9367 373.1439,66.8327" id="Fill-16"></path>
<path d="M345.7711,11.5043 C346.0031,11.3583 346.7451,10.9793 346.8791,10.9123 C348.2401,10.3613 349.6791,10.3153 350.9921,11.1003 C351.9161,11.6173 352.5411,12.4153 352.7581,12.6773 C352.8021,12.7343 353.2031,13.1973 353.3961,13.3943 L353.4031,13.3873 C354.5231,14.4833 356.2221,15.4013 358.8151,15.4013 C362.9901,15.4013 366.4171,11.8653 366.4171,7.5823 C366.4171,3.7333 363.4991,0.5553 359.7751,0.0743 C359.5201,0.0213 358.6581,0.0153 358.5381,0.0263 C339.7251,0.5453 330.5971,24.4463 328.5691,29.8063 L329.1071,22.4983 C329.1071,21.8513 328.3551,21.3193 327.0721,21.3193 C326.2171,21.3193 325.5751,21.9613 325.1431,22.1753 C321.2881,24.5323 313.8971,27.3123 308.8641,28.6003 C308.4361,28.6003 308.0091,29.6703 308.0091,30.4213 C308.0091,31.1723 308.4361,32.1323 308.8641,32.1323 C314.0071,32.6693 314.8621,33.8483 314.8621,39.5223 L314.8621,57.8353 C314.8621,64.6893 313.8971,66.0813 307.5811,66.8323 C307.1531,66.9373 306.7251,67.9023 306.7251,68.7573 C306.7251,69.6133 307.1531,70.6873 307.5811,70.6873 C312.0771,70.6873 316.7921,70.0403 321.8251,70.0403 C326.9631,70.0403 332.6421,70.6873 337.1391,70.6873 C337.5661,70.6873 337.9941,69.6133 337.9941,68.7573 C337.9941,67.9023 337.5661,66.9373 337.1391,66.8323 C330.9271,66.0813 328.7831,64.6893 328.7831,57.8353 L328.7831,43.6513 C328.7831,37.9853 335.9151,17.6533 345.7711,11.5043" id="Fill-18"></path>
<path d="M303.2971,67.1701 C302.9331,66.4061 302.1351,65.7281 301.7041,65.8191 C301.6181,65.8481 301.5471,65.8651 301.4631,65.8931 C301.4601,65.8941 301.4581,65.8951 301.4581,65.8951 C301.0931,65.9871 300.7111,66.0401 300.3081,66.0401 C299.2891,66.0401 298.4521,65.7101 297.8151,65.0631 C296.8271,64.0511 296.3541,61.7221 296.4051,59.2221 L297.0491,37.9091 C297.2121,32.7221 296.0001,28.7601 293.4531,26.1311 C291.0051,23.6071 287.3301,22.3281 282.5321,22.3281 C271.2271,22.3281 257.8441,29.6151 257.8441,35.7741 C257.8441,39.1411 260.1901,41.4021 263.6841,41.4021 C268.4451,41.4021 270.9511,38.3311 271.3461,32.0111 C271.4581,28.6891 275.0101,26.9451 278.4591,26.9451 C280.1931,26.9451 281.5721,27.4581 282.5591,28.4661 C283.7721,29.7071 284.3541,31.6631 284.2931,34.2821 L283.9621,43.9121 L283.7651,43.9561 C271.7651,46.7281 255.8081,51.5641 255.8081,61.4761 C255.8081,67.6911 260.9391,72.0331 268.2881,72.0331 C274.9081,72.0331 280.1321,69.8091 283.3941,65.5971 L283.7041,65.1981 L283.8501,65.6781 C285.0491,69.5871 288.5191,71.9201 293.1331,71.9201 C296.7671,71.9201 300.5811,71.2251 303.3001,69.2831 C303.3241,69.2661 303.3441,69.2471 303.3671,69.2301 C303.7191,69.0011 303.6511,67.9131 303.2971,67.1701 L303.2971,67.1701 Z M283.8641,47.4571 L283.4381,60.0941 C282.4401,64.2041 278.7151,66.0191 275.4631,66.0191 C271.7441,66.0191 269.5241,63.4001 269.5241,59.0141 C269.5241,51.6011 276.6101,48.8801 283.5401,47.1911 L283.8741,47.1091 L283.8641,47.4571 Z" id="Fill-20"></path>
</g>
</g>
</svg>
I have tried some options such as:
#emissaries-logo {
fill: $dark-gray !important;
}
svg ~ g {
fill: $dark-gray !important;
}
but none of them worked. Any idea?
You can't actually style <g> elements (though I've read somewhere there are some exceptions), since they're only meant to group children. To my knowledge, I guess you could use<rect>: <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="462px" height="73px" viewBox="0 0 462 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> <title>emissaries-logo</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="emissaries-logo" fill="#FFFFFF"> <rect fill="#A9A9A9" d="M44.762,42.7358 ...." /> //and so on </g> </g> </svg>
SVG polygon fill is hiding my text labels
For some reason when I add a white fill to the polygon, the text elements dont show. I tried using z-index to bring the text labels above but still. The text elements are black. If I set the polygon fills to none, the text labels show.
My fiddle (with original issue):
https://jsfiddle.net/omarel/qznxd4vo/1/
UPDATE: Based on the right answer below, this is the updated working fiddle: https://jsfiddle.net/omarel/qznxd4vo/5/
<style type="text/css">
.st0{fill:red;}
.st3 {fill:#fff;stroke:#58595B;stroke-miterlimit:10;}
.st3:hover {
fill:red;cursor:pointer;
}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="619px"
height="587px" viewBox="0 0 619 587" style="enable-background:new 0 0 619 587;" xml:space="preserve">
<g id="labels">
<g>
<text transform="matrix(1 0 0 1 459.8574 312.0654)" class="st0">pool</text>
</g>
<g>
<text transform="matrix(1 0 0 1 456.687 178.0654)" class="st0">201</text>
</g>
<g>
<text transform="matrix(1 0 0 1 324.7412 178.0654)" class="st0">202</text>
</g>
<g>
<text transform="matrix(1 0 0 1 241.1572 178.0654)" class="st0">203</text>
</g>
<g>
<text transform="matrix(1 0 0 1 181.8091 178.0654)" class="st0">204</text>
</g>
<g>
<text transform="matrix(1 0 0 1 117.1631 178.0654)" class="st0">205</text>
</g>
<g>
<text transform="matrix(1 0 0 1 459.9531 65.0654)" class="st0 ">206</text>
</g>
<g>
<text transform="matrix(1 0 0 1 343.7593 65.0654)" class="st0">207</text>
</g>
<g>
<text transform="matrix(1 0 0 1 229.0552 65.0654)" class="st0">208</text>
</g>
<g>
<text transform="matrix(1 0 0 1 117.9531 65.0654)" class="st0">209</text>
</g>
<g>
<text transform="matrix(1 0 0 1 31.687 65.0654)" class="st0">210</text>
</g>
<g>
<text transform="matrix(1 0 0 1 69.3291 270.0654)" class="st0">211</text>
</g>
<g>
<text transform="matrix(1 0 0 1 67.8833 345.0654)" class="st0 st1 st2">212</text>
</g>
<g>
<text transform="matrix(1 0 0 1 127.2993 440.5654)" class="st0 st1 st2">213</text>
</g>
<g>
<text transform="matrix(1 0 0 1 198.4512 440.5654)" class="st0 st1 st2">214</text>
</g>
<g>
<text transform="matrix(1 0 0 1 302.3052 440.5654)" class="st0 st1 st2">215</text>
</g>
<g>
<text transform="matrix(1 0 0 1 401.0952 440.5654)" class="st0 st1 st2">216</text>
</g>
<g>
<text transform="matrix(1 0 0 1 522.4014 440.5654)" class="st0 st1 st2">217</text>
</g>
<g>
<text transform="matrix(1 0 0 1 21.6973 444.0654)" class="st0 st1 st2">218</text>
</g>
<g>
<text transform="matrix(1 0 0 1 66.5952 548.5654)" class="st0 st1 st2">219</text>
</g>
<g>
<text transform="matrix(1 0 0 1 204.7412 548.5654)" class="st0 st1 st2">220</text>
</g>
<g>
<text transform="matrix(1 0 0 1 325.3833 548.5654)" class="st0 st1 st2">221</text>
</g>
<g>
<text transform="matrix(1 0 0 1 420.437 548.5654)" class="st0 st1 st2">222</text>
</g>
<g>
<text transform="matrix(1 0 0 1 522.853 548.5654)" class="st0 st1 st2">223</text>
</g>
</g>
<g id="units">
<a href="#" class="link"><polygon class="st3" points="404.75,274 404.75,342 436.75,342 436.75,357 465.75,357 465.75,342.75 564.25,334.75 580.5,281.5
465.5,272.75 465.75,259.25 436.5,259.25 436.75,274 "/></a>
<polygon class="st3" points="593.333,203.333 523,9.333 219.667,20 219.667,31 14.333,31 14.333,201 28.667,201 14.333,399
14.333,578 606.333,578 606.333,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 313.25,399.5 313.25,392.75
293.5,388.5 288,399.75 131,399.75 131,200.75 289.25,200.75 289.25,213.5 "/>
<polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,120 478.333,120 478.333,122.667
461.667,122.667 461.667,143.5 412.667,143.5 412.667,120 386,120 386,210.32 593.333,203.333 "/>
<polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,104.167 461.667,104.167
461.667,95.5 446.833,95.5 446.833,106.5 415.167,106.5 415.167,13.09 523,9.333 "/>
<path class="st3" d="M415.167,106.5"/>
<polygon class="st3" points="415.167,13.09 415.167,106.5 344.667,106.5 344.667,104.333 331,104.333 331,106.5 310.333,106.5
310.333,95.5 294.333,95.5 294.333,17.375 "/>
<polyline class="st3" points="294.333,17.375 294.333,106.5 233.167,106.5 233.167,104.167 219.667,104.167 219.667,106.5
201.167,106.5 201.167,95.333 184.667,95.333 184.667,31 219.667,31 "/>
<polygon class="st3" points="184.667,95.333 168.083,95.333 168.083,106.5 160.333,106.5 160.333,104.083 146.917,104.083
146.917,106.5 78.75,106.5 78.75,80.083 75.917,80.083 75.917,31 184.667,31 "/>
<polygon class="st3" points="386,135 368.333,135 368.333,120 322,120 322,122.25 308.5,122.25 308.5,120 303.25,120
303.25,130.667 286.417,130.667 286.417,164.5 289.25,164.5 289.25,213.5 386,210.32 "/>
<polygon class="st3" points="286.417,130.667 270.25,130.667 270.25,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120
218.667,120 218.667,200.75 289.25,200.75 289.25,164.5 286.417,164.5 "/>
<polygon class="st3" points="218.667,200.75 154.917,200.75 154.917,171.333 163.583,171.333 163.583,120 181.583,120
181.583,122.333 195,122.333 195,120 202.167,120 202.167,131.333 218.667,131.333 "/>
<polygon class="st3" points="154.917,200.75 154.917,171.333 163.583,171.333 163.583,131 146.667,131 146.667,122.417
131.667,122.417 131.667,146.333 112.5,146.333 112.5,172.833 88.667,172.833 88.667,242.167 131,242.167 131,200.75 "/>
<polygon class="st3" points="75.917,31 14.333,31 14.333,201 71.167,201 71.167,172.667 48.417,172.667 48.417,103.75
71.667,103.75 71.667,106.5 78.75,106.5 78.75,80.083 75.917,80.083 "/>
<polygon class="st3" points="71.167,201 28.667,201 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914
131,307.914 131,242.167 88.667,242.167 88.667,186.331 71.167,186.331 "/>
<polyline class="st3" points="88.667,172.667 71.167,172.667 71.167,169.915 69.417,169.915 69.417,124.915 71.917,124.915
71.917,119.331 58.25,119.331 58.25,103.75 71.667,103.75 71.667,106.5 146.917,106.5 146.917,104.083 160.333,104.083
160.333,106.5 219.667,106.5 219.667,104.167 233.167,104.167 233.167,106.5 331,106.5 331,104.333 344.667,104.333 344.667,106.5
461.833,106.5 461.833,104.167 478.25,104.167 478.25,122.667 461.667,122.667 461.667,120 322,120 322,122.25 308.5,122.25
308.5,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120 195,120 195,122.333 181.583,122.333 181.583,120 146.75,120
146.75,122.417 131.667,122.417 131.667,119.331 88.667,119.331 88.667,172.667 "/>
<line class="st3" x1="71.917" y1="122.831" x2="88.667" y2="122.831"/>
<line class="st3" x1="112.5" y1="146.333" x2="112.5" y2="119.331"/>
<polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 67.625,409 67.625,375.625
29.375,375.625 29.375,372.875 16.26,372.875 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914
131,307.914 "/>
<polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 84.5,409 84.5,424.5 108.5,424.5
108.5,465.75 126.75,465.75 126.75,475 133.875,475 133.875,472.125 147,472.125 147,475 162.625,475 162.625,399.75 131,399.75
"/>
<polygon class="st3" points="61,475 45.125,475 45.125,425.312 65.75,425.312 65.75,409 67.625,409 67.625,375.625 29.375,375.625
29.375,372.875 16.26,372.875 14.333,399 14.333,500.75 52.875,500.75 52.875,487.875 61.001,487.875 "/>
<polygon class="st3" points="52.875,500.75 52.875,505.125 87.125,505.125 87.125,515 108.625,515 108.625,487.75 139.875,487.75
139.875,499.5 145.75,499.5 145.75,515 142.875,515 142.875,531.5 149,531.5 149,578 14.333,578 14.333,500.75 "/>
<polygon class="st3" points="139.875,487.75 202.375,487.75 202.375,499.625 219.25,499.625 219.25,490.5 232.5,490.5
232.5,487.75 280,487.75 280,500.75 282.875,500.75 282.875,578 149,578 149,531.5 142.875,531.5 142.875,515 145.75,515
145.75,499.5 139.875,499.5 "/>
<polygon class="st3" points="162.625,475 219.5,475 219.5,472 232.25,472 232.25,475 242,475 242,464.125 257.375,464.125
257.375,399.75 162.625,399.75 "/>
<polygon class="st3" points="257.375,464.125 274.875,464.125 274.875,475 285,475 285,472.5 298.125,472.5 298.125,475
366.625,475 366.625,399.5 313.25,399.5 313.25,392.75 293.5,388.5 288,399.75 257.375,399.75 "/>
<polygon class="st3" points="282.875,500.75 301.875,500.75 301.875,487.75 310.333,487.75 310.333,490.875 323.5,490.875
323.5,487.75 366.625,487.75 366.625,527.75 392.25,527.75 392.25,578 282.875,578 "/>
<polygon class="st3" points="392.25,527.75 392.25,578 465.5,578 465.5,557 468.375,557 468.375,500.75 451.875,500.75
451.875,487.75 439.25,487.75 439.25,490.75 426.125,490.75 426.125,487.75 415,487.75 415,527.75 "/>
<path class="st3" d="M392.25,578"/>
<polygon class="st3" points="465.5,578 465.5,557 468.375,557 468.375,487.75 505.875,487.75 505.875,490.75 528.25,490.75
528.25,475 606.333,475 606.333,578 "/>
<polygon class="st3" points="366.625,475 418.375,475 418.375,472.625 431.875,472.625 431.875,475 441.75,475 441.75,464.25
458.75,464.25 458.75,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 366.625,399.5 "/>
<polygon class="st3" points="458.75,399.667 606.333,399.667 606.333,475 519.125,475 519.125,472.375 505.75,472.375 505.75,464
490.5,464 490.5,475 458.75,475 "/>
<polygon class="st3" points="519.125,472.375 519.125,490.75 505.875,490.75 505.875,487.75 439.25,487.75 439.25,490.75
426.125,490.75 426.125,487.75 323.5,487.75 323.5,490.875 310.333,490.875 310.333,487.75 232.5,487.75 232.5,490.5 219.25,490.5
219.25,487.75 78.375,487.75 78.375,505.125 62.875,505.125 62.875,487.75 61.001,487.75 61.001,475 133.875,475 133.875,472.125
147,472.125 147,475 219.5,475 219.5,472 232.25,472 232.25,475 285,475 285,472.5 298.125,472.5 298.125,475 418.375,475
418.375,472.625 431.875,472.625 431.875,475 505.875,475 505.875,472.375 "/>
<line class="st3" x1="384.339" y1="487.75" x2="384.339" y2="500.625"/>
<polyline class="st3" points="366.625,500.625 401.625,500.625 401.625,504 415,504 "/>
<line class="st3" x1="401.625" y1="500.625" x2="401.625" y2="487.75"/>
<polyline class="st3" points="67.625,475 67.625,472.75 66,472.75 66,425.312 84.5,425.312 84.5,475 "/>
<line class="st3" x1="111.875" y1="465.75" x2="111.875" y2="475"/>
</g>
</svg>
Simply move your text elements above the polygons by reversing the order of the "units" and "labels" groups: https://jsfiddle.net/mh946reL/ You may want to change the color of your texts so that they don't disappear in the background when a room is highlighted.