Related
I want to create an animation in which an object (in this case, the first blue line in the image https://i.stack.imgur.com/RDwQ2.png) move along an svg path. The line is provided in the form of PNG.
I tried using the tag but it's not changing anything.
Here is basically an example of what I wanted animate image on SVG Path.
Below is my code.
<svg height="238.158mm" viewbox="0 0 1920 900" width="508.071mm" xmlns="http://www.w3.org/2000/svg">
<path class="green-line" d="M 1.09,741.82
C 1.09,741.82 17.09,734.00 17.09,734.00
17.09,734.00 51.45,718.73 51.45,718.73
51.45,718.73 74.55,709.09 74.55,709.09
74.55,709.09 110.91,694.73 110.91,694.73
110.91,694.73 157.45,678.18 157.45,678.18
157.45,678.18 199.82,665.27 199.82,665.27
199.82,665.27 253.82,650.55 253.82,650.55
253.82,650.55 312.67,638.00 312.67,638.00
312.67,638.00 387.67,627.33 387.67,627.33
387.67,627.33 453.33,621.00 453.33,621.00
453.33,621.00 505.33,618.67 505.33,618.67
505.33,618.67 576.67,620.33 576.67,620.33
576.67,620.33 619.33,623.67 619.33,623.67
619.33,623.67 636.67,625.00 636.67,625.00
636.67,625.00 715.67,636.33 716.00,636.33
716.33,636.33 783.00,648.33 783.00,648.33
783.00,648.33 846.67,665.00 846.67,665.00
846.67,665.00 895.33,679.00 895.33,679.00
895.33,679.00 951.33,697.67 951.33,697.67
951.33,697.67 1026.00,723.33 1026.00,723.33
1026.00,723.33 1097.33,747.67 1097.33,747.67
1097.33,747.67 1176.67,776.00 1176.67,776.00
1176.67,776.00 1236.67,798.00 1236.67,798.00
1236.67,798.00 1265.00,807.67 1265.00,807.67
1265.00,807.67 1316.00,826.55 1316.00,826.55
1316.00,826.55 1351.64,837.27 1351.64,837.27
1351.64,837.27 1389.09,847.82 1389.09,847.82
1389.09,847.82 1429.45,858.36 1429.45,858.36
1429.45,858.36 1452.91,863.82 1452.91,863.82
1452.91,863.82 1470.81,868.06 1470.81,868.06
1470.81,868.06 1489.88,872.06 1489.88,872.06
1489.88,872.06 1503.88,874.25 1503.88,874.25
1503.88,874.25 1513.50,875.94 1513.50,875.94
1513.50,875.94 1533.44,879.31 1533.44,879.31
1533.44,879.31 1546.38,881.56 1546.38,881.56
1546.38,881.56 1556.19,883.00 1556.19,883.00
1556.19,883.00 1566.19,884.19 1566.19,884.19
1566.19,884.19 1596.69,887.69 1596.69,887.69
1596.69,887.69 1614.12,889.88 1614.12,889.88
1614.12,889.88 1633.06,891.12 1633.06,891.12
1633.06,891.12 1645.25,892.25 1645.25,892.25
1645.25,892.25 1682.62,895.06 1682.62,895.06
1682.62,895.06 1693.31,896.12 1693.31,896.12
1693.31,896.12 1707.22,897.04 1707.22,897.04
1707.22,897.04 1723.17,897.78 1723.17,897.78
1723.17,897.78 1729.09,898.22 1729.09,898.22
1729.09,898.22 1763.43,899.22 1763.43,899.22
1763.43,899.22 1768.74,899.48 1768.78,899.48
1768.83,899.48 1774.59,899.56 1774.59,899.56
1774.59,899.56 1778.34,899.88 1778.34,899.88
1778.34,899.88 1779.50,899.97 1779.50,899.97
1779.50,899.97 1793.39,899.91 1793.39,899.91
1793.39,899.91 1807.48,899.96 1807.48,899.96
1807.48,899.96 1817.13,900.00 1817.13,900.00
1817.13,900.00 1822.35,899.83 1822.43,899.87
1822.52,899.91 1884.73,899.91 1884.73,899.91
1884.73,899.91 1897.73,899.91 1897.73,899.91
1897.73,899.91 1918.64,900.27 1918.64,900.27
1918.64,900.27 1919.62,900.00 1919.62,900.00" id="animatePath" style="fill:none;stroke:none ;stroke-miterlimit:10;">
</path>
<image height="250px" id="car" width="1918px" x="0" xlink:href="/data/cms/images/1668585137_img-top-panel-curve.png" y="500">
<animatemotion begin="0s" dur="20s" repeatcount="indefinite" restart="whenNotActive" xlink:href="#car">
<mpath xlink:href="#animatePath">
</mpath>
</animatemotion>
</image>
</svg>
</div>
I am trying to make a SVG image using html and css. I need the colors to be quickly interchangeable by substituting different css variables. This is the set up I currently have:
:root{
--c1:#f00;
--c2:#00f;
}
polygon{
fill:var(attr(data-clr));
stroke:var(attr(data-clr));
stroke-width:1;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100'>
<polygon points="0,100 0,0, 100,0" data-clr="--c1"/>
<polygon points="0,100 100,100, 100,0" data-clr="--c2"/>
</svg>
The expected result:
A square made up of 2 triangles, one red, one blue.
The actual result: A square made up of 2 black triangles.
Keep in mind that in the real world this will include many more polygons, and simply hardcoding the colors, then find-and-replacing won't do the trick. Doing it with classes would lead to a lot of duplicate code/code patterns so I would like to avoid it if possible.
<- I would need to rewrite the css polygon into a class, and then for each color in the whole svg image copy and paste that class with the correct color. Yeah no.
Instead of using data attributes you can use the style attribute like so:
polygon{
fill:var(--c1);
stroke:var(--c2);
stroke-width:1;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100' style="--c2:#00f;" >
<polygon points="0,100 0,0, 100,0" style="--c1:#f00;" />
<polygon points="0,100 100,100, 100,0" style="--c1:#00f;" />
</svg>
I hope this is what you need.
UPDATE
The OP is commenting:
that means I won't be able to use drop-in stylesheets containing the vars... Meaning if I want to change colours I'll have to do a find and replace.
In this case you can do something like this: the value --c1 is another variable: var(--a1); The same for --c2
:root{
--a1:#f00;
--a2:#00f;
}
polygon{
fill:var(--c1);
stroke:var(--c2);
stroke-width:1;
}
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='100' height='100' style="--c2:#00f;" >
<polygon points="0,100 0,0, 100,0" style="--c1:var(--a1);" />
<polygon points="0,100 100,100, 100,0" style="--c1:var(--a2);" />
</svg>
From this link, I generate a SVG file from a Postscript (itself made by latex) :
inkscape example.ps --export-plain-svg example.svg
example.ps comes from example.tex below :
\begin{document}
\begin{pspicture}(-4,-2.5)(6,2.5)
\rput(-4,1.5){light\,(1\,:\,yes,\,0\,:\,no)}
\rput(-4,-0.5){noise\,(1\,:\,yes,\,0\,:\,no)}
\rput(5,1.5){eyes\,(0\,:\,closed,\,1\,:\,opened)}
\rput(5,-0.5){voice\,(00\,:\,snore,\,01\,:\,laugh,\,10:\,growl,\,11:\,cry)}
\rput(0,0){Robot toy module}
\psframe(-1.5,-2)(1.5,2)
\psline{->}(-1.5,1)(-4,1)
\psline{->}(-1.5,-1)(-4,-1)
\psline{->}(1.5,1)(4,1)
\psline{->}(1.5,-1)(4,-1)
\psline{-}(2.5,-1.2)(2.9,-0.8)
\rput(2.7,-1.4){2}
\psline{-}(-0.2,-2)(0,-1.7)
\psline{-}(0.2,-2)(0,-1.7)
\psline{-}(0,-2)(0,-2.4)
\rput(0,-2.6){H}
\end{pspicture}
\end{document}
Now I would like to include into a HTML page with a fine position, i.e at the top of parent container.
Unfortunately, I have troubles to adjust the parameters of position from the SVG file into HTML ; for example, I put into HTML page :
<object data="example.svg" width="700 " height="400 " type="image/svg+xml">
and "example.svg" (just created vith inkscape) contains :
viewBox="0 0 743.75 1052.5"
height="1052.5"
width="743.75"
But the result (visible on this link) is not good, since SVG is too small.
The SVG file is located on the following link.
I took width="700 " height="400 for <object> because it would be, like for a standard image into <img> tag, a fine size (and so position) for the SVG into HTML page.
Maybe this problem comes from width and height offsets for SVG "example.svg" file (seen when I visualize it directly in browser : check here )
I tried to set 700 and 400 in viewBox and also for height width :
viewBox="0 0 700 400"
height="400"
width="700"
The result is visible here. For width, it may be acceptable but I have still this large vertical offset (I mean blank space) with the top "title" ("Coding > Robot module").
Is there a general rule to apply for positioning a SVG file without offset. (or at least with a small offset like with an image).
PS: I would like to keep the <object> tag to include the SVG into HTML.
The problem is that the SVG generated by LaTeX is for the whole page, and the viewBox it sets represents the page.
To get the diagram in the middle of the page to scale and fit whatever size you want it to, you need to update the viewBox so that it reflexts the bounding box of (just) your diagram.
So it turns out that the appropriate viewBox to use is approximately:
viewBox="134 174 489 168"
If you set it to that (and update your width and height) you will end up with an SVG that behaves as you want.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="134 174 489 168"
height="168"
width="489"
xml:space="preserve"
version="1.1"
id="svg2"><metadata
id="metadata8"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs6" /><g
transform="matrix(1.25,0,0,-1.25,0,1052.5)"
id="g10"><g
transform="scale(0.1,0.1)"
id="g12"><g
transform="scale(10,10)"
id="g14"><text
id="text16"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,108.974,686.3)"><tspan
id="tspan18"
y="0"
x="0 2.7596512 5.5193024 10.559301 15.839153 21.359074 25.199078 31.798918 36.238419 41.278271 45.718269 49.678268 53.997841 60.597839 65.037338 70.557343 75.597343">light(1:yes,0:no)</tspan><tspan
id="tspan20"
y="56.6926"
x="-0.96015602 4.559844 9.599843 12.359494 16.319492 22.319571 26.159575 32.759415 37.198917 42.238766 46.678768 50.638767 54.958336 61.678257 66.11776 71.637756 76.677757">noise(1:yes,0:no)</tspan><tspan
id="tspan22"
y="0"
x="239.63785 244.07784 249.11792 253.55791 259.07809 262.91806 269.51791 273.9574 278.3974 281.15704 286.19702 290.15704 294.59705 300.11703 304.43674 311.15668 315.47626 320.51627 326.27628 330.71631 336.23633 340.67636 346.19638">eyes(0:closed,1:opened)</tspan><tspan
id="tspan24"
y="56.6926"
x="200.39804 205.43788 210.47787 213.23752 217.67751 223.67735 227.51735 232.55736 239.15742 243.59691 247.55693 253.07692 258.11691 262.07693 266.51691 270.8364 275.8764 282.35632 286.79581 289.55545 294.59546 300.11545 305.15546 310.67545 315.11502 320.15503 325.19504 329.51471 334.55472 338.51471 343.31473 350.51474 353.27438 357.47418 362.51419 367.5542 371.87387 376.31387 380.27386 385.55386">voice(00:snore,01:laugh,10:growl,11:cry)</tspan><tspan
id="tspan26"
y="42.5196"
x="113.50584 120.82584 125.86586 131.62576 136.66576 143.74568 147.58568 152.38553 160.90544 169.18546 174.46559 179.98558 185.50557 188.26523">Robottoymodule</tspan></text>
</g><path
id="path28"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2199.59,6461.8 0,562.94 842.42,0 0,-1125.88 -842.42,0 0,562.94 z" /><path
id="path30"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6760.71 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path32"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6745.27 -682.71,0" /><path
id="path34"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 1530.18,6193.78 -43.24,-15.44 43.24,-15.45 -17.29,15.45" /><path
id="path36"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2195.6,6178.34 -682.71,0" /><path
id="path38"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6729.82 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path40"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6745.27 682.71,0" /><path
id="path42"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 3711.42,6162.89 43.24,15.45 -43.24,15.44 17.29,-15.44" /><path
id="path44"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3046,6178.34 682.71,0" /><path
id="path46"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 3329.46,6121.64 113.38,113.39" /><g
transform="scale(10,10)"
id="g48"><text
id="text50"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,336.095,603.375)"><tspan
id="tspan52"
y="0"
x="0">2</tspan></text>
</g><path
id="path54"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2564.11,5894.87 56.69,85.04" /><path
id="path56"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2677.49,5894.87 -56.69,85.04" /><path
id="path58"
style="fill:none;stroke:#000000;stroke-width:7.97010994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
d="m 2620.8,5894.87 0,-113.38" /><g
transform="scale(10,10)"
id="g60"><text
id="text62"
style="font-variant:normal;font-weight:normal;font-size:9.96263981px;font-family:CMR10;-inkscape-font-specification:CMR10;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
transform="matrix(1,0,0,-1,258.36,569.119)"><tspan
id="tspan64"
y="0"
x="0">H</tspan><tspan
id="tspan66"
y="429.819"
x="44.7598">1</tspan></text>
</g></g></g></svg>
If you need your diagram to scale and fit its parent container. Set both width and height to "100%".
i generated a svg code for a map in illustrator to put in my website but i had this code which has a tag called <image> which i can not handle, can't give it css properties nor just put a foreground text on it, my objective is to have that image or the g or the link changes foreground color as i hover over it, but i can't find any thing about that tag, there is only articles about path or circle or line for svg tags but not <image>
here's my code :
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1434 1454.3" enable-background="new 0 0 1434 1454.3" xml:space="preserve">
<switch>
<foreignObject requiredExtensions="&ns_ai;" x="0" y="0" width="1" height="1">
<i:pgfRef xlink:href="#adobe_illustrator_pgf">
</i:pgfRef>
</foreignObject>
<g i:extraneous="self">
<a xlink:href="../Reservation/Second Level/index.php">
<g id="Inezgane_Ait_Melloul.svg_xA0_Image_1_">
<image overflow="visible" width="37" height="19" id="Inezgane_Ait_Melloul.svg_xA0_Image" xlink:href="data:image/png;base64,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
CCJS2wAAAABJRU5ErkJggg==" transform="matrix(0.75 0 0 0.75 728.25 568.5)">
</image>
</g>
</a>
</g>
</switch>
it's not the full code because the full one is like thousand lines, the map has a lot of zones to cover.
but i'm kind of not familiar with svg at all, so maybe i'm doing something wrong in the concept of interactive map design
All,
Question 1:
I have been experienced difficulties in aligning text to the middle of the polygons in SVG, HTML.
There are a number of polygons. But, I only put 3 up for the easiness.
For each polygon, I have the points value for Xs and Ys.
Hence, It is possible to get an approximately average value of x and y, and use these values in "text" elements.
It is acceptable to align text to the SVG polygons if there are only a small number of them.
So I wonder if there is a SVG property, or any other way to align the text to the polygon automatically?
Such as text-align, or position: centre, which you don't have to calculate the x,y value, it will align to the middle of polygons?
Here is the JSFiddle:
http://jsfiddle.net/matildayipan/umb2fmuc/
HTML:
<svg height="503" width="900" fill="white" stroke="black" stroke-width="2">
<g id="Ashfield">
<polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379"/>
<text data-brackets-id="152" x="536" y="380" style="font-size: 12px;"> Ashfield </text>
</g>
<g id="Auburn">
<polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360"/>
</g>
<g id="Bankstown">
<polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430"/>
</g>
</svg>
As you can see, I use x, y to roughly align the text "Ashfield" to the polygon(Ashfield).
Question 2:
As it shows, the border of polygon "Auburn" and "Bankstown" are having a small gap in between. How can I merge them together to make it looks like a single border, just exactly like the map?
What you are looking for is text-anchor="middle".
http://www.w3.org/TR/SVG/text.html#TextAlignmentProperties
It will centre the text horizonatally on the point you specify. However there is no reliable way to center the text vertically, but using dy="0.5em" may be a reasonable approximation for you for a single line of text. You can tweak the dy amount to suit the font you are using and it should work for any font size.
<svg>
<circle cx="150" cy="75" r="5" fill="red"/>
<text x="150" y="75" text-anchor="middle" dy="0.5em"font-size="20">Here is some centred text</text>
</svg>