StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>your problem can be solved by setting the gradients coordinate system to user space (instead of the default object-bounding box).</p> <p>you might try </p> <pre><code><defs> <linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </linearGradient> </defs> </code></pre> <p>the solution does not defy the comment by e.nelson - what happens here is that each subgroup representing the nations still has its individual gradient instance applied while all these instances share the same coord origin and the same transformations w.r.t the user space - so at any point in the final rendering, it doesn't matter which gradient instance is visible.</p> <p>two adjustments are required:</p> <ol> <li><p>[ minor] you have to adjust the y1/y2 offsets (or the stop offsets) of the gradient definition - as they refer to the user coord space of the whole map, africa only covers a portion of the gradient between the stops defined. try <code>y1="50%"</code> and <code>y2="100%"</code>.</p></li> <li><p>[medium] if you have a look at svg g-elements defining the country shapes you'll note that some of them are subjected to an additional translation. they effectively shift the user coordinate system and therefore also apply to the gradient which causes the affected country shapes to appear like blotches on the map. this spurios transform is probably an artefact of the actions in the generator used to create the map. it can be remedied by adding the translation offsets to each <em>absolute</em> coordinate in the path elements inside the respective g-elements. as these paths are defined using relative coordinates for the pieces stitched together, this reduces to altering the coords of the initial 'M' and final 'C' commands in the path's d-attribute.</p></li> </ol> <p>i have cooked up an ad hoc perl script to normalize the structure of the svg code representing the country borders that implements the abovementioned modifications. note that these alterations can be done rather conveniently in js too. <a href="http://collapsar.co.ohost.de/data/astcko.03.png" rel="noreferrer">This is the result</a>.</p> <p>hope that helps and drop me a note if you need additional informations on how to perform the adjustments mentioned.</p> <p>PS: i just noticed that mozambique is still missing from the generated output - for that single country's shape yet another translation has been specified. this minor detail is something to be added later today, however ...</p> <p><a href="http://collapsar.co.ohost.de/data/astcko.03.png" rel="noreferrer">result http://collapsar.co.ohost.de/data/astcko.03.png</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload