Related
For a toy project I'm working with random flag designs and random flag colors. Since the paths are a huge chunk of ugly exported SVG, I'd like to have all these shapes put into a library SVG. That way, the generator would only have to create a small, simple-to-read stub to define the colors, and import the designs from the library.
A pair of demonstration files.
flaglib.svg:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="300px" viewBox="0 0 500 300" xml:space="preserve">
<g id="Design1">
<rect width="500px" height="300px" fill="url(#BACKGROUND_PRIMARY)" />
<circle cx="250px" cy="150px" r="90px" fill="url(#FOREGROUND_PRIMARY)" />
</g>
...
</svg>
flagstub.svg:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="2.0" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="500px" height="500px" viewBox="0 0 500 500" xml:space="preserve">
<defs>
<linearGradient id="BACKGROUND_PRIMARY"><stop offset="50%" stop-color="#F00" /></linearGradient>
<linearGradient id="FOREGROUND_PRIMARY"><stop offset="50%" stop-color="#FF0" /></linearGradient>
</defs>
<use href="flaglib.svg#Design1"></use>
</svg>
The tag with the ID #BACKGROUND_PRIMARY is only defined once, so when it imports the missing text before it renders, it shouldn't be pulling a value for that from anywhere else. And yet, they ignore the values set.
So: how can the SVG elements imported from the library file use the colors defined in the stub fule?
What browser(s) are you testing with? Last I checked, only Firefox properly supports external use references.
See this question for more discussion on this topic.
I have the following SVG:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve">
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 " />
</svg>
I want to make this animated - so that the arrow is bouncing like a "This way"
I have looked online and I can't seem to find any examples that does this. Can anyone suggest a way of doing this? Not using jQuery or CSS just pure SVG?
EDIT:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve">
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 ">
<animateMotion path="M 0 0 V 300 Z" dur="20s" repeatCount="indefinite" />
</polygon>
</svg>
As you can see, the arrow leaves the screen and does not come back for some time. I just need it to bounce up and down and not leave the screen??
If you want it to move less, adjust the V so it doesn't go as far.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 38.7" enable-background="new 0 0 50 38.7" xml:space="preserve">
<polygon fill="#08B2EF" points="49.4,14.6 25.4,1.2 0.6,14.6 11.1,14.6 7.5,36.2 42.5,36.2 38.5,14.6 ">
<animateMotion path="M 0 0 V 20 Z" dur="20s" repeatCount="indefinite" />
</polygon>
</svg>
i have converted a map from vector to SVG in illustrator i am able give mouseover effect, link etc but i am not able give the tooltip effect even i tried many sample from stackoverflow, as the example are different what i see in my code also if impliement no effect i can find kindly help in this how to do
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#F79226;}
]]>
</style>
<path class="st0" d="M39.218,124.52c0.857,0,1.715,0.02,2.572-0.01c0.39-0.012,0.807-0.049,1.159-0.199
c0.55-0.236,1.104-0.604,1.047-1.287c-0.046-0.563-0.667-0.563-1.076-0.713c-1.176-0.432-2.354-0.869-3.555-1.223
c-2.095-0.615-3.657-2.063-5.355-3.305c-0.767-0.563-0.769-1.154-0.148-1.816c0.181-0.191,0.326-0.424,0.529-0.586
c2.208-1.773,2.807-4.191,2.8-6.865c-0.002-0.857,0.051-1.715,0.067-2.572c0.011-0.598,0.05-1.238-0.389-1.695
c-0.821-0.852-0.839-1.885-0.829-2.955c0.02-1.976-0.047-3.892-0.788-5.824c-0.569-1.485,0.075-3.097,0.843-4.519
c0.061-0.111,0.218-0.177,0.263-0.291c0.853-2.139,2.386-3.614,4.247-4.951c1.068-0.768,1.708-2.154,2.483-3.301
c0.653-0.966,1.542-1.634,2.536-2.159c2.089-1.104,5.048-0.211,5.847,1.952c0.502,1.359,0.333,2.912-0.74,4.073
c-1.137,1.231-1.548,2.729-1.906,4.279c-0.203,0.878-0.058,1.592,0.869,1.93c0.98,0.359,1.355,1.137,1.654,2.061
c0.671,2.078,1.477,4.071,3.408,5.392c0.702,0.479,0.53,1.911-0.312,2.833c-1.112,1.219-2.309,2.357-3.458,3.541
c-0.413,0.424-0.811,0.867-1.182,1.328c-0.216,0.268-0.291,0.629-0.09,0.922c0.249,0.363,0.61,0.176,0.881,0.014
c1.078-0.641,2.119-1.344,3.21-1.959c2.455-1.383,4.888-1.229,7.18,0.35c0.708,0.488,1.278,0.537,1.994,0.17
c1.996-1.023,4.003-2.027,6.005-3.039c0.542-0.275,0.968-0.627,1.194-1.242c0.662-1.797,0.267-2.409-1.638-2.458
c-0.837-0.023-1.75,0.209-2.368-0.633c-0.676-0.92-1.119-1.965-1.302-3.069c-0.126-0.763,1.584-2.128,2.539-2.12
c0.39,0.003,0.777,0.146,1.17,0.183c0.436,0.041,1.011,0.269,1.181-0.347c0.171-0.613-0.04-1.214-0.671-1.481
c-0.478-0.201-1.009-0.296-1.526-0.384c-0.91-0.154-1.823-0.317-2.742-0.382c-0.961-0.068-1.547-0.57-2.049-1.339
c-1.112-1.7-0.615-2.838,1.455-3.063c1.045-0.113,2.114-0.005,3.163-0.1c0.932-0.085,1.376-0.909,1.02-1.692
c-0.275-0.604-0.838-0.574-1.354-0.603c-2.568-0.142-5.137-0.371-7.706-0.36c-1.675,0.007-2.895-0.513-3.901-1.843
c-1.113-1.472-2.37-2.834-3.533-4.27c-1.676-2.067-1.531-4.837,0.333-6.776c1.326-1.38,2.676-2.736,3.987-4.131
c0.537-0.572,1.097-1.146,1.269-1.971c0.139-0.666,0.305-1.317-0.491-1.709c-0.116-0.057-0.232-0.141-0.311-0.24
c-0.824-1.046-0.652-6.054,0.314-6.969c1.34-1.27,2.72-2.505,4.158-3.661c1.184-0.952,2.071-0.652,2.49,0.815
c0.489,1.714,0.952,3.43,1.628,5.085c0.334,0.816,0.75,1.521,1.48,2.045c2.798,2.01,5.151,4.524,7.693,6.825
c0.584,0.528,1.091,1.174,1.906,1.365c0.669,0.157,1.436,0.809,2.009,0.098c0.576-0.713,0.827-1.655,0.511-2.606
c-0.123-0.37-0.359-0.703-0.555-1.047c-1.21-2.12-2.446-4.226-3.628-6.361c-1.037-1.872-0.726-2.778,1.354-3.382
c1.661-0.481,3.344-0.612,4.8,0.803c1.066,1.036,1.145,0.96,2.297,0.015c0.408-0.335,0.822-0.666,1.201-1.032
c0.729-0.706,0.674-0.994-0.356-1.31c-1.387-0.425-2.801-0.76-4.204-1.131c-0.778-0.207-1.451-0.544-2.019-1.164
c-0.979-1.068-1.218-2.073-0.707-3.561c0.644-1.874,1.655-2.933,3.558-3.51c3.471-1.053,6.866-2.35,10.303-3.516
c1.086-0.369,1.99-0.959,2.834-1.738c6.692-6.173,13.414-12.315,20.118-18.476c0.689-0.634,1.459-1.121,2.304-1.514
c3.649-1.698,7.3-3.391,10.938-5.113c2.025-0.958,4.162-0.677,6.226-0.433c1.257,0.148,2.017,1.399,2.714,2.444
c0.289,0.432,0.516,0.938,0.641,1.442c0.461,1.852,1.89,2.572,3.49,3.158c0.648,0.238,1.175,0.203,1.579-0.356
c1.057-1.464,2.777-2.515,2.827-4.615c0.016-0.707,0.523-1.024,1.205-1.046c0.528-0.016,1.058,0.006,1.583-0.031
c1.084-0.077,1.712,0.424,2.077,1.431c0.655,1.81,1.72,3.413,2.684,5.065c0.404,0.692,0.822,1.359,1.727,1.487
c0.554,0.079,0.932,0.471,1.301,0.851c1.196,1.23,2.385,2.468,3.585,3.694c0.479,0.49,0.768,1.034,0.811,1.743
c0.112,1.817-0.48,2.275-2.235,1.667c-1.958-0.679-2.147-0.611-2.598,0.932c-0.337,1.156,0.608,2.655,1.921,2.953
c0.508,0.115,1.053,0.052,1.575,0.113c0.318,0.038,0.666,0.096,0.926,0.263c0.188,0.12,0.398,0.48,0.344,0.655
c-0.405,1.311,1.471,1.913,0.878,3.395c-1.313,3.279-3.335,5.534-6.955,6.298c-3.372,0.712-6.721,1.364-10.186,1.143
c-0.327-0.021-0.659,0.012-0.988,0.029c-0.822,0.045-1.16,0.516-1.138,1.303c0.02,0.711,0.38,1.104,1.093,1.135
c0.659,0.028,1.318,0.027,1.979,0.039c2.101,0.037,4.058,1.404,4.471,3.439c0.541,2.658,1.177,5.274,2.1,7.824
c0.132,0.364,0.17,0.777,0.178,1.168c0.052,2.524,0.13,3.059-2.573,2.917c-0.6-0.031-1.233,0.021-1.654,0.503
c-1.092,1.248-2.576,1.781-4.044,2.386c-1.32,0.543-1.345,0.689-0.753,1.882c1.758,3.537,1.347,4.399-2.385,5.758
c-2.168,0.788-4.131,0.925-6.21-0.336c-1.521-0.924-3.095-1.781-4.509-2.854c-1.397-1.061-2.86-1.455-4.599-1.346
c-2.255,0.142-4.472,0.244-6.446,1.548c-1.741,1.15-2.416,2.914-2.77,4.805c-0.205,1.09,0.666,2.045,2.036,2.241
c1.899,0.272,3.86,0.487,5.194-1.427c1.53-2.197,3.789-1.793,5.936-1.573c1.025,0.105,1.67,1.049,2.35,1.732
c1.061,1.07,2.241,1.479,3.727,1.406c1.777-0.088,3.563-0.009,5.345-0.013c0.876-0.001,1.176,0.28,1.225,1.286
c0.108,2.259,0.788,4.436,2.218,6.225c3.09,3.866,6.383,7.557,10.185,10.76c0.56,0.472,1.126,0.858,1.866,1.051
c1.449,0.376,1.854,1.837,0.833,3.001c-0.562,0.643-1.271,1.148-1.886,1.748c-1.748,1.701-2.137,4.977-0.854,7.039
c0.279,0.447,0.581,0.885,0.832,1.348c1.422,2.607,1.316,3.205-0.738,5.301c-2.883,2.941-2.543,1.848-1.715,5.988
c0.337,1.684,0.812,3.33,1.37,4.955c0.638,1.855-0.089,3.924-1.707,5.01c-0.491,0.33-1.023,0.602-1.542,0.891
c-2.429,1.357-2.877,3.682-1.104,5.844c1.632,1.99,3.31,3.943,4.917,5.951c1.623,2.029,1.654,3.154,0.258,5.354
c-1.609,2.531-1.144,2.695-4.511,1.57c-3.567-1.191-7.165-2.289-10.746-3.439c-1.269-0.408-2.558-0.592-3.893-0.592
c-3.167,0.002-6.336-0.023-9.503-0.09c-1.229-0.025-2.329,0.254-3.396,0.859c-2.121,1.207-4.285,2.34-6.413,3.535
c-0.946,0.533-1.921,0.803-3.015,0.797c-4.619-0.025-9.238-0.025-13.858-0.002c-1.091,0.008-2.063-0.293-3.035-0.754
c-3.28-1.553-6.595-3.033-9.86-4.615c-1.121-0.543-2.084-0.533-3.178,0.049c-4.627,2.461-3.589,1.055-4.89,6.131
c-0.114,0.445-0.189,0.904-0.251,1.361c-0.256,1.877-1.373,3.047-3.21,3.385c-0.932,0.17-1.531-0.189-1.853-1.059
c-0.528-1.424-1.075-2.838-1.576-4.271c-0.518-1.482-1.35-1.799-2.622-0.855c-0.951,0.707-1.819,1.525-2.722,2.297
c-0.46,0.395-0.953,0.672-1.584,0.727c-1.455,0.129-1.831-0.094-2.317-1.512c-0.128-0.375-0.261-0.75-0.353-1.135
c-0.259-1.086-0.938-1.662-2.034-1.877c-1.358-0.27-2.694-0.65-4.046-0.949c-0.81-0.18-1.33-0.596-1.321-1.463
c0.01-1.039-0.607-1.697-1.299-2.336c-1.745-1.611-3.451-3.266-5.233-4.834c-1.017-0.895-1.279-1.949-1.498-3.262
c-0.513-3.078,1.339-4.434,3.551-5.682c0.611-0.344,1.276-0.314,1.931-0.273c1.645,0.104,3.291,0.211,4.932,0.365
c2.081,0.197,3.633-1.023,5.273-1.959c0.633-0.363,0.778-2.156,0.353-2.744c-0.354-0.488-0.814-0.34-1.239-0.135
c-0.691,0.336-1.033,1.014-1.412,1.621c-0.549,0.879-1.294,1.25-2.316,1.203c-0.856-0.041-1.716-0.027-2.573,0
c-1.104,0.035-2.011-0.102-2.669-1.236c-0.55-0.949-2.331-1.029-3.811-0.326c-1.25,0.594-2.493,1.227-3.662,1.965
c-1.716,1.084-3.562,0.754-5.389,0.652c-0.772-0.043-1.11-0.684-1.278-1.342c-0.424-1.658-1.242-2.76-3.093-3.125
c-1.35-0.264-1.508-1.408-0.461-2.336c0.951-0.844,1.982-1.52,3.378-1.346c0.714,0.09,1.449,0.016,2.175,0.016
C39.218,124.559,39.218,124.539,39.218,124.52z"/>
</svg>
How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite.
When I do this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve">
<g id="icons">
<g id="linkedin">
<path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z"
/>
</g>
<g id="github">
<path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z"
/>
</g>
</g>
</svg>
the SVG icons overlap. How can I modify these to have an offset between two icons?
For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg
Try to replace the 2nd M command to m command.
"M" means absolute position, "m" means relative position.
so,
<M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…
I'm working with inline SVG elements and I would like to run this in IE8, could anyone implement this with Raphael?
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="643px" height="735px" viewBox="0 0 643 735" enable-background="new 0 0 643 735" xml:space="preserve">
<a xlink:href="img/interactive/pietraCT/00.jpg" rel="floors" title="zobacz rzut parteru">
<g id="ct_00">
<polygon points="172.25,647 381.75,640.75 422,641.75 422,665 415.75,679.5 402.75,679.5 401.25,667 393.751,665 363.625,665 352.005,671.673 346,673 338.625,677 172.25,672.5"/>
</g>
</a>
</svg>
This is answered here
In short, you need to use the path() call, and you need to modify your points to adhere to the convention that Raphael uses (which is defined here)
this is a fiddle using your polygon. You'll have to scroll down in the bottom right window to see it though.