Related
I have used an SVG as a regular images inside a React component, as shown below:
import React from "react";
const FreeCourseMaterial = () => {
return (
<img
className="w-72 h-36"
src="./images/StockCover/stock-cover.svg"
alt="Stock Cover Formula"
></img>
);
};
export default FreeCourseMaterial;
The result looks like the following:
I am trying to adjust the size of the svg using Tailwind CSS classes (w-72 & h-36). But I am seeing no change in size. Am I doing this right?
What is the method I can use to control the size of the SVG? Let's say I want to double the size of the svg. How can I achieve this?
Please note that I have used Corel Draw to create the 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">
<!-- Creator: CorelDRAW 2018 (64-Bit) -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="4in" height="2in" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2666.66 1333.33"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font id="FontID0" horiz-adv-x="722" font-variant="normal" style="fill-rule:nonzero" font-style="normal" font-weight="700">
<font-face
font-family="Arial">
<font-face-src>
<font-face-name name="Arial Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0 0z"/></missing-glyph>
<glyph unicode=" " horiz-adv-x="277" d=""/>
<glyph unicode="=" horiz-adv-x="584" d="M40.9912 397.011l0 127.004 501.007 0 0 -127.004 -501.007 0zm0 -217.016l0 127.004 501.007 0 0 -127.004 -501.007 0z"/>
<glyph unicode="A" horiz-adv-x="722" d="M717.993 0l-156.146 0 -61.8628 163.003 -287.149 0 -59.517 -163.003 -153.319 0 278.007 716.009 153.168 0 286.818 -716.009zm-264.985 283.991l-99.5158 265.015 -96.6587 -265.015 196.175 0z"/>
<glyph unicode="C" horiz-adv-x="722" d="M530.992 263.992l139.996 -43.0062c-21.473,-78.8247 -57.3216,-137.319 -107.335,-175.664 -49.9835,-38.1643 -113.32,-57.3216 -190.16,-57.3216 -95.155,0 -173.318,32.5103 -234.67,97.5008 -61.1711,64.9905 -91.8168,153.83 -91.8168,266.669 0,119.154 30.8261,211.843 92.3281,277.826 61.5019,66.0131 142.492,99.0045 242.82,99.0045 87.6665,0 158.852,-26.0143 213.527,-77.8322 32.6607,-30.6758 56.9908,-74.6744 73.3211,-132.176l-143.003 -33.9839c-8.51102,36.9914 -26.1646,66.3138 -52.9909,87.8169 -27.0067,21.5031 -59.6674,32.1795 -98.0121,32.1795 -53.1713,0 -96.3279,-19.0069 -129.319,-57.1712 -33.1719,-38.0139 -49.6827,-99.6662 -49.6827,-184.987 0,-90.3431 16.3303,-154.852 48.8406,-193.167 32.6607,-38.5252 75.0053,-57.6825 127.154,-57.6825 38.5252,0 71.667,12.1801 99.3354,36.6606 27.6683,24.5105 47.6677,62.8553 59.6674,115.335z"/>
<glyph unicode="H" horiz-adv-x="722" d="M72.9903 0l0 716.009 145.018 0 0 -282.007 281.976 0 0 282.007 145.018 0 0 -716.009 -145.018 0 0 313.013 -281.976 0 0 -313.013 -145.018 0z"/>
<glyph unicode="P" horiz-adv-x="666" d="M72.9903 0l0 716.009 231.843 0c87.847,0 144.988,-3.51869 171.664,-10.6764 40.9912,-10.8267 75.3361,-34.1644 103.004,-70.1633 27.6683,-35.9989 41.5025,-82.4938 41.5025,-139.515 0,-43.9987 -7.99976,-80.8096 -23.8489,-110.824 -15.9995,-29.9841 -36.1493,-53.5022 -60.6598,-70.6746 -24.4805,-16.992 -49.5023,-28.33 -74.8248,-33.8336 -34.4952,-6.82686 -84.3283,-10.3155 -149.68,-10.3155l-93.9821 0 0 -270.007 -145.018 0zm145.018 594.99l0 -203.994 78.8247 0c56.8404,0 94.6738,3.84951 113.831,11.338 19.1573,7.4885 34.1644,19.1573 44.9911,35.3373 10.8568,15.9995 16.3303,34.4952 16.3303,55.8179 0,26.1646 -7.63887,47.6677 -22.8264,64.6898 -15.3379,16.992 -34.4952,27.6683 -57.9832,31.999 -17.1724,3.1578 -51.6676,4.81189 -103.666,4.81189l-69.5017 0z"/>
<glyph unicode="S" horiz-adv-x="666" d="M35.0065 231.993l140.988 14.0146c8.51102,-47.1866 25.503,-81.6818 51.3368,-103.847 25.8338,-22.1647 60.6598,-33.1719 104.508,-33.1719 46.3144,0 81.3209,9.83429 104.839,29.5029 23.488,19.6686 35.3072,42.6754 35.3072,69.0205 0,16.992 -4.99233,31.3073 -14.8266,43.307 -9.83429,11.8493 -27.1571,22.1948 -51.818,30.8562 -16.8416,5.98478 -55.1863,16.3303 -115.185,31.3374 -77.1706,19.3077 -131.334,42.9762 -162.491,71.1558 -43.8182,39.4875 -65.6522,87.6665 -65.6522,144.507 0,36.4801 10.3155,70.8249 30.8261,102.644 20.661,31.8487 50.3143,56.0284 89.1703,72.6895 38.8259,16.6612 85.5012,24.9917 140.477,24.9917 89.5011,0 157.018,-19.819 202.189,-59.6674 45.3219,-39.8184 68.9904,-92.8393 71.3362,-159.334l-145.018 -4.99233c-6.16523,36.9914 -19.3378,63.4868 -39.4875,79.6668 -20.1798,16.1499 -50.4947,24.3301 -90.8544,24.3301 -41.6529,0 -74.3136,-8.66139 -97.8316,-26.0143 -15.1574,-11.1576 -22.8264,-25.9842 -22.8264,-44.6603 0,-16.992 7.15768,-31.4878 21.5031,-43.4874 18.1649,-15.5183 62.344,-31.5178 132.507,-48.179 70.1633,-16.5108 121.981,-33.8336 155.484,-51.4872 33.6832,-17.8341 59.9982,-42.0138 79.0051,-72.8399 19.0069,-30.8261 28.5104,-68.84 28.5104,-114.012 0,-40.9912 -11.338,-79.4863 -34.1644,-115.335 -22.8264,-35.8185 -55.0059,-62.4944 -96.6587,-79.8171 -41.683,-17.5032 -93.6814,-26.1646 -155.845,-26.1646 -90.4935,0 -159.995,20.8114 -208.505,62.6447 -48.5098,41.683 -77.321,102.523 -86.8245,182.34z"/>
<glyph unicode="a" horiz-adv-x="556" d="M174.01 358.997l-123.996 22.0144c13.9845,50.6451 38.1643,88.1477 72.3287,112.478 34.1644,24.3301 84.9899,36.5102 152.326,36.5102 61.1711,0 106.824,-7.15768 136.838,-21.6535 29.8337,-14.5259 51.006,-32.8411 63.156,-55.1863 12.1801,-22.3151 18.3453,-63.156 18.3453,-122.823l-2.01498 -159.995c0,-45.5024 2.16535,-79.1856 6.49605,-100.839 4.3307,-21.6535 12.5109,-44.8408 24.5105,-69.5017l-135.996 0c-3.48862,8.99221 -7.99976,22.3452 -13.1725,39.9988 -2.16535,8.18021 -3.81943,13.5034 -4.84196,15.9995 -23.3076,-23.0068 -48.3294,-40.1792 -74.9752,-51.6676 -26.6759,-11.4884 -55.0059,-17.3228 -85.1704,-17.3228 -53.1713,0 -95.1851,14.4958 -125.831,43.4874 -30.6758,28.8412 -46.0137,65.5018 -46.0137,109.831 0,29.1721 7.00731,55.3367 20.9918,78.3435 14.0146,22.8264 33.5028,40.5101 58.8554,52.6601 25.1421,12.1801 61.5019,22.8264 108.989,31.999 63.9981,11.9996 108.508,23.3376 133.169,33.6832l0 13.8342c0,26.6458 -6.49605,45.6528 -19.5182,57.1411 -13.1425,11.338 -37.8334,17.022 -73.9827,17.022 -24.5105,0 -43.5175,-4.84196 -57.1712,-14.6763 -13.8342,-9.65384 -24.8414,-26.8263 -33.3223,-51.3368zm183.994 -111.004c-17.5032,-5.83441 -45.352,-12.8116 -83.5163,-20.9918 -37.9838,-8.18021 -62.9755,-16.18 -74.6444,-23.8489 -17.8341,-12.8116 -26.8563,-28.8112 -26.8563,-48.3294 0,-19.3077 7.18775,-35.8185 21.5031,-49.8331 14.3454,-13.9845 32.5103,-20.9918 54.675,-20.9918 24.6609,0 48.3294,8.18021 70.8249,24.3301 16.5108,12.5109 27.518,27.518 32.6907,45.5024 3.48862,11.6688 5.32315,34.014 5.32315,66.8251l0 27.3375z"/>
<glyph unicode="c" horiz-adv-x="556" d="M524.014 365.012l-135.003 -23.9993c-4.51114,26.8263 -14.8567,46.976 -31.0066,60.6598 -16.18,13.5034 -36.9914,20.3302 -62.6748,20.3302 -34.1644,0 -61.5019,-11.8493 -81.8321,-35.4877 -20.3302,-23.6685 -30.4953,-63.1861 -30.4953,-118.673 0,-61.6824 10.3456,-105.17 31.0066,-130.673 20.661,-25.503 48.3294,-38.1643 83.005,-38.1643 25.9842,0 47.3068,7.4885 63.8176,22.3151 16.6612,14.8567 28.33,40.3597 35.1568,76.6894l135.003 -23.0068c-13.9845,-62.0132 -40.8108,-108.839 -80.4788,-140.507 -39.668,-31.6682 -92.8393,-47.4873 -159.694,-47.4873 -75.6368,0 -136.146,23.9993 -181.137,71.8174 -45.1716,47.9986 -67.6671,114.342 -67.6671,199.182 0,85.832 22.6459,152.507 67.8175,200.325 45.1716,47.8482 106.343,71.667 183.513,71.667 62.9755,0 113.17,-13.6537 150.492,-40.8409 37.1718,-27.1571 63.8176,-68.4791 80.178,-124.147z"/>
<glyph unicode="d" horiz-adv-x="610" d="M548.014 0l-127.004 0 0 76.1782c-21.1723,-29.6833 -46.3445,-51.8481 -75.1857,-66.8551 -28.8112,-14.8266 -57.9832,-22.3151 -87.3357,-22.3151 -59.8177,0 -110.974,23.9993 -153.65,72.1482 -42.495,48.179 -63.8477,115.185 -63.8477,201.347 0,87.9974 20.661,155.003 62.1635,200.836 41.5025,45.8332 93.8318,68.6596 157.168,68.6596 58.0133,0 108.358,-24.1797 150.672,-72.3287l0 258.338 137.018 0 0 -716.009zm-366.004 269.496c0,-55.4871 7.66894,-95.6663 22.8264,-120.508 22.1647,-35.9989 52.9909,-53.9833 92.6589,-53.9833 31.5178,0 58.3441,13.5034 80.3284,40.5101 22.1647,26.9766 33.1719,67.1559 33.1719,120.808 0,59.8478 -10.6764,102.854 -32.1494,129.169 -21.5031,26.3451 -48.8406,39.5176 -82.3434,39.5176 -32.5103,0 -59.6674,-13.0222 -81.6818,-39.0063 -21.8339,-26.0143 -32.811,-64.8402 -32.811,-116.508z"/>
<glyph unicode="e" horiz-adv-x="556" d="M371.989 163.995l137.018 -23.0068c-17.5032,-50.1639 -45.352,-88.3282 -83.1855,-114.643 -37.9838,-26.1646 -85.5012,-39.3372 -142.312,-39.3372 -90.1627,0 -157.018,29.5029 -200.174,88.4785 -34.1644,47.3369 -51.3368,107.004 -51.3368,179.183 0,86.0125 22.4956,153.499 67.3363,202.159 44.8408,48.8406 101.651,73.1707 170.341,73.1707 76.9902,0 137.83,-25.503 182.491,-76.509 44.5099,-50.9759 65.8326,-129.169 63.8477,-234.489l-343.027 0c1.02253,-40.6604 11.9996,-72.3287 33.1719,-95.0047 21.0219,-22.676 47.3369,-33.9839 78.6743,-33.9839 21.5031,0 39.4875,5.83441 54.0134,17.4732 14.6462,11.6688 25.6534,30.5254 33.1419,56.5096zm7.99976 139.003c-0.992451,39.8484 -11.1576,70.1633 -30.6457,90.8243 -19.5182,20.8415 -43.1867,31.187 -71.1858,31.187 -29.8337,0 -54.4946,-11.0072 -73.9827,-32.8411 -19.5182,-21.8339 -29.0217,-51.6676 -28.6608,-89.1703l204.475 0z"/>
<glyph unicode="g" horiz-adv-x="610" d="M59.0057 -32.9915l156.988 -19.0069c2.67661,-18.4957 8.66139,-31.157 18.0145,-38.1643 13.1725,-9.83429 33.6531,-14.8266 61.6523,-14.8266 35.8485,0 62.6748,5.32315 80.6592,16.1499 11.9996,7.18775 21.1723,18.6761 27.3375,34.6756 4.18033,11.338 6.34567,32.5103 6.34567,63.0056l0.661634 75.8173c-41.3221,-56.4795 -93.3205,-84.6591 -155.995,-84.6591 -69.6821,0 -124.989,29.5029 -165.679,88.3282 -31.999,46.4948 -47.9986,104.508 -47.9986,173.679 0,87.0049 21.0219,153.319 62.8553,199.152 41.8333,45.8332 93.9821,68.84 156.326,68.84 64.1484,0 117.169,-28.1796 158.822,-84.5087l0 73.5015 127.996 0 0 -465.339c0,-61.141 -4.99233,-106.974 -15.1574,-137.139 -10.0147,-30.345 -24.1797,-54.0134 -42.495,-71.3362 -18.1649,-17.1724 -42.495,-30.8562 -73.0204,-40.5101 -30.4953,-9.83429 -68.9904,-14.6763 -115.485,-14.6763 -87.9974,0 -150.341,15.1875 -187.152,45.352 -36.841,30.3149 -55.1863,68.4791 -55.1863,115.004 0,4.48107 0.180446,10.1651 0.511263,16.6612zm123.004 302.998c0,-55.0059 10.6463,-95.1851 31.8186,-120.688 21.3527,-25.4729 47.6677,-38.3146 78.8247,-38.3146 33.3524,0 61.6824,13.1725 84.6892,39.3372 23.1572,26.1646 34.6456,64.8402 34.6456,116.147 0,53.6826 -10.9771,93.5009 -33.1419,119.515 -22.0144,25.9842 -50.0135,39.0063 -83.8471,39.0063 -32.8411,0 -59.8177,-12.8417 -81.1705,-38.3447 -21.1723,-25.503 -31.8186,-64.3289 -31.8186,-116.658z"/>
<glyph unicode="i" horiz-adv-x="277" d="M71.9978 589.005l0 127.004 136.988 0 0 -127.004 -136.988 0zm0 -589.005l0 518.992 136.988 0 0 -518.992 -136.988 0z"/>
<glyph unicode="k" horiz-adv-x="556" d="M67.0055 0l0 716.009 136.988 0 0 -379.838 160.506 182.822 168.987 0 -176.987 -189.648 190.009 -329.343 -147.996 0 -131.004 234.158 -63.5169 -67.998 0 -166.16 -136.988 0z"/>
<glyph unicode="l" horiz-adv-x="277" d="M71.9978 0l0 716.009 136.988 0 0 -716.009 -136.988 0z"/>
<glyph unicode="n" horiz-adv-x="610" d="M544.014 0l-137.018 0 0 264.503c0,55.9983 -3.00743,92.1777 -8.84184,108.508 -5.98478,16.4807 -15.4883,29.142 -28.8112,38.3146 -13.353,9.17266 -29.3525,13.6838 -47.9986,13.6838 -23.9993,0 -45.5024,-6.49605 -64.5093,-19.5182 -19.1573,-12.9921 -32.1795,-30.3149 -39.1567,-51.6676 -7.18775,-21.5031 -10.6764,-61.1711 -10.6764,-119.154l0 -234.67 -136.988 0 0 518.992 126.974 0 0 -76.1481c45.5024,58.1637 102.674,87.1553 171.844,87.1553 30.345,0 58.1637,-5.50359 83.3358,-16.3303 25.3225,-11.0072 44.3295,-24.8414 57.1712,-41.683 12.9921,-16.992 21.9843,-36.1493 27.0067,-57.6524 5.1427,-21.5031 7.66894,-52.1789 7.66894,-92.1777l0 -322.156z"/>
<glyph unicode="o" horiz-adv-x="610" d="M39.9988 265.827c0,45.6828 11.1576,89.8319 33.6531,132.507 22.5256,42.8258 54.3442,75.3361 95.5159,97.8316 41.1717,22.4956 87.0049,33.8336 137.83,33.8336 78.4939,0 142.672,-25.503 192.836,-76.509 50.1639,-51.1564 75.1556,-115.485 75.1556,-193.498 0,-78.6443 -25.3225,-143.815 -75.8173,-195.483 -50.6752,-51.6676 -114.342,-77.5014 -191.182,-77.5014 -47.4873,0 -92.8092,10.8267 -135.996,32.3299 -43.0062,21.5031 -75.8173,52.9909 -98.3429,94.6738 -22.4956,41.5025 -33.6531,92.1476 -33.6531,151.815zm140.988 -7.33813c0,-51.4872 12.1801,-90.9747 36.5102,-118.312 24.5105,-27.518 54.4946,-41.1717 90.3431,-41.1717 35.6681,0 65.6522,13.6537 89.8319,41.1717 24.1496,27.3375 36.3297,67.1559 36.3297,119.335 0,50.8255 -12.1801,89.9823 -36.3297,117.32 -24.1797,27.4879 -54.1638,41.1717 -89.8319,41.1717 -35.8485,0 -65.8326,-13.6838 -90.3431,-41.1717 -24.3301,-27.3375 -36.5102,-66.8251 -36.5102,-118.342z"/>
<glyph unicode="r" horiz-adv-x="389" d="M203.001 0l-136.988 0 0 518.992 126.974 0 0 -73.6519c21.8339,34.826 41.5025,57.6524 59.0057,68.4791 17.5032,10.8568 37.3523,16.18 59.517,16.18 31.3374,0 61.5019,-8.66139 90.4935,-25.8338l-42.495 -119.666c-23.1873,15.0071 -44.6603,22.4956 -64.5093,22.4956 -19.3378,0 -35.6681,-5.32315 -48.991,-15.8191 -13.353,-10.6764 -23.8489,-29.6833 -31.5178,-57.3517 -7.66894,-27.6683 -11.4884,-85.6516 -11.4884,-173.829l0 -159.995z"/>
<glyph unicode="s" horiz-adv-x="556" d="M23.0068 146.011l137.981 20.9918c5.83441,-26.4954 17.6837,-46.6753 35.6681,-60.329 17.8341,-13.8342 43.0062,-20.661 75.1857,-20.661 35.4877,0 62.1635,6.49605 80.148,19.4881 11.9996,9.17266 18.0145,21.5031 18.0145,36.841 0,10.3155 -3.33825,18.9769 -9.83429,25.8338 -6.82686,6.49605 -22.1647,12.6613 -45.8332,18.1649 -110.824,24.4805 -181.017,46.8257 -210.67,67.0055 -41.1717,28.1495 -61.6523,67.1559 -61.6523,116.989 0,45.1716 17.8341,83.005 53.3217,113.651 35.4877,30.6758 90.4935,46.0137 164.988,46.0137 71.0054,0 123.846,-11.6688 158.341,-34.826 34.4952,-23.3376 58.3441,-57.6825 71.3362,-103.185l-128.989 -23.9993c-5.50359,20.3302 -16.18,35.9989 -31.6682,46.8557 -15.5183,10.8267 -37.6831,16.1499 -66.5243,16.1499 -36.3297,0 -62.3139,-4.99233 -78.1631,-15.1574 -10.4959,-7.15768 -15.6687,-16.5108 -15.6687,-27.8488 0,-9.83429 4.51114,-18.1649 13.6838,-24.9917 12.4808,-9.17266 55.3367,-21.9843 128.658,-38.6755 73.3512,-16.6612 124.508,-36.9914 153.499,-61.141 28.8412,-24.3602 43.1867,-58.5246 43.1867,-102.192 0,-47.4873 -19.849,-88.4785 -59.6674,-122.643 -39.668,-34.1644 -98.5234,-51.3368 -176.506,-51.3368 -70.6746,0 -126.673,14.3154 -167.995,42.8258 -41.1717,28.5104 -68.1784,67.1559 -80.8397,116.177z"/>
<glyph unicode="t" horiz-adv-x="333" d="M309.013 518.992l0 -108.989 -94.0122 0 0 -210.159c0,-42.6754 0.84208,-67.5168 2.67661,-74.5241 1.83453,-6.97723 5.83441,-12.8116 12.3305,-17.4732 6.3156,-4.51114 13.9845,-6.85694 23.1572,-6.85694 12.8417,0 31.157,4.3307 55.3367,13.1725l11.4884 -106.673c-31.8186,-13.6537 -67.8175,-20.4806 -108.147,-20.4806 -24.691,0 -46.8557,4.15025 -66.6747,12.4808 -19.849,8.33058 -34.3448,19.1874 -43.4874,32.3299 -9.3531,13.353 -15.6687,31.187 -19.3378,53.863 -2.85706,15.9995 -4.3307,48.3294 -4.3307,97.1399l0 227.181 -63.0056 0 0 108.989 63.0056 0 0 103.004 136.988 80.99 0 -183.994 94.0122 0z"/>
<glyph unicode="v" horiz-adv-x="556" d="M214.67 0l-209.167 518.992 143.996 0 97.6813 -264.834 28.33 -88.4785c7.4885,22.4956 12.3305,37.3222 14.165,44.4799 4.66151,14.6763 9.50347,29.3525 14.8266,43.9987l99.0045 264.834 140.988 0 -206.159 -518.992 -123.665 0z"/>
</font>
<style type="text/css">
<![CDATA[
#font-face { font-family:"Arial";font-variant:normal;font-style:normal;font-weight:bold;src:url("#FontID0") format(svg)}
.str0 {stroke:#727376;stroke-width:26.67;stroke-miterlimit:2.61313}
.fil4 {fill:none}
.fil0 {fill:#E6E7E8}
.fil1 {fill:#727376}
.fil3 {fill:#00A859}
.fil2 {fill:#3E4095}
.fnt0 {font-weight:bold;font-size:130.91px;font-family:'Arial'}
]]>
</style>
</defs>
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<rect class="fil0" x="-0.01" y="-0.02" width="2666.67" height="666.67"/>
<text x="175.55" y="377.12" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="458.42" class="fil1 fnt0">Average </text>
<text x="2186.98" y="458.42" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="458.42" class="fil2 fnt0">Historical</text>
<text x="1323.93" y="269.91" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="307.61" width="1118.5" height="6.28"/>
<text x="175.55" y="1036.94" class="fil1 fnt0">Stock Cover =</text>
<text x="1042.23" y="1118.24" class="fil1 fnt0">Average </text>
<text x="2099.6" y="1118.24" class="fil1 fnt0"> Sales</text>
<text x="1590.41" y="1118.24" class="fil3 fnt0">Planned</text>
<text x="1323.93" y="929.72" class="fil1 fnt0">Stock on Hand</text>
<rect class="fil1" x="1192.26" y="967.42" width="1118.5" height="6.28"/>
<rect class="fil4 str0" x="2.01" y="-1.79" width="2666.67" height="1333.33"/>
</g>
</svg>
I have a card in which I've added SVG from bootstrap. I want to change the content of the card when the SVG is clicked. In a way i want to use svg as button.
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart-line" viewBox="0 0 16 16" onClick={showStatHandler}>
<path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/>
</svg>
you can get a listener to your SVG by doing smth like
document.querySelector('svg').onclick = () => {
// do stuff
}
I am trying to display an in-line HTML SVG as follows:
<a target="blank_" href="https://www.linkedin.com/">
<svg class="svg" viewBox="0 0 24 24">
<path d="M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z" />
</svg>
</a>
As a react component without JSX. Something like:
let path = React.createElement('path', {d: "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z", null);
let svg = React.createElement('svg', {className: "svg" viewBox: "0 0 24 24"}, path);
let link = React.createElement('a', {target: "blank_", href="https://www.linkedin.com/"}, svg);
But I am having trouble getting svg's to display. Any tips on displaying inline svg's?
You had some typos in your script. I've fixed them up below. Feel free to do a comparison.
let path = React.createElement('path', {d: "M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19M18.5,18.5V13.2A3.26,3.26 0 0,0 15.24,9.94C14.39,9.94 13.4,10.46 12.92,11.24V10.13H10.13V18.5H12.92V13.57C12.92,12.8 13.54,12.17 14.31,12.17A1.4,1.4 0 0,1 15.71,13.57V18.5H18.5M6.88,8.56A1.68,1.68 0 0,0 8.56,6.88C8.56,5.95 7.81,5.19 6.88,5.19A1.69,1.69 0 0,0 5.19,6.88C5.19,7.81 5.95,8.56 6.88,8.56M8.27,18.5V10.13H5.5V18.5H8.27Z"}, null);
let svg = React.createElement('svg', {className: "svg", viewBox: "0 0 24 24"}, path);
let link = React.createElement('a', {target: "_blank", href:"https://www.linkedin.com/"}, svg);
ReactDOM.render(link, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
I want to do: change the background colour of all objects with the label <folder> to blue
#startmindmap
skinparam backgroundColor transparent
* layer 1
* layer 2
* obj
* obj
* <&folder> obj folder
* layer 2
* <&folder> obj folder
#endmindmap
If anyone has experience of this, I would gladly accept any 'pearls of wisdom' they are willing to impart.
#startmindmap
skinparam backgroundColor #EEAADD
*[#FF0000] Debian
**[#Orange] Ubuntu
***[#LightGreen] Linux Mint
**[#Green] Rasbian
#endmindmap
Using this syntax you can color your boxes.
I found this method on this link.
Demo
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="130px" preserveAspectRatio="none" style="width:334px;height:130px;background:#EEAADD;" version="1.1" viewBox="0 0 334 130" width="334px" zoomAndPan="magnify"><defs><filter height="300%" id="f1n8snf7oca3o3" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><rect fill="#FF0000" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="65" x="10" y="49.9702"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="20" y="76.8345">Debian</text><rect fill="#FFA500" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="65" x="125" y="20"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="45" x="135" y="46.8643">Ubuntu</text><rect fill="#90EE90" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="83" x="240" y="20"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="63" x="250" y="46.8643">Linux Mint</text><path d="M190,39.9702 L200,39.9702 C215,39.9702 215,39.9702 230,39.9702 L240,39.9702 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><path d="M75,69.9404 L85,69.9404 C100,69.9404 100,39.9702 115,39.9702 L125,39.9702 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><rect fill="#008000" filter="url(#f1n8snf7oca3o3)" height="39.9404" rx="12.5" ry="12.5" style="stroke: #A80036; stroke-width: 1.5;" width="72" x="125" y="79.9404"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="52" x="135" y="106.8047">Rasbian</text><path d="M75,69.9404 L85,69.9404 C100,69.9404 100,99.9106 115,99.9106 L125,99.9106 " fill="none" style="stroke: #A80036; stroke-width: 1.0;"/><!--MD5=[a83dff5f9fd7a46abce9d8ea448b7c30]
#startmindmap
skinparam backgroundColor #EEAADD
*[#FF0000] Debian
**[#Orange] Ubuntu
***[#LightGreen] Linux Mint
**[#Green] Rasbian
#endmindmap
--></g></svg>
this method may work. (PlantUML Web Server not work)
#startmindmap
skinparam backgroundColor transparent
sprite $my_right_arrow [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}
* layer 1
* layer 2
* obj
* obj
* <color:00ffff> <&folder> obj folder
* layer 2
* <color:00ffff> <&folder> obj folder
* <back:00ffff> <&folder> obj folder
' backgroundColor not work!
* <color:00ffff> <$my_right_arrow> <color:000000> <size:30> test
#endmindmap
reference: http://plantuml.com/en/sprite
I can not figure out why my svg is not drawing.
I get no "real" errors on my console (The "WARNING: tween was overwritten by another" is not relevant here)
You can see the full demo here:
http://mc-communicate.com/test/svg.html
Here are the relevant codes:
SVG HTML:
<svg version="1.1" width="1095" height="299" xmlns="http://www.w3.org/2000/svg">
<path id="c" d="m102,91.8c3,-0.5 5.6,-2.5 8.7,-2.5c3.10001,0.6 3.5,4.2 4.3,6.8c-2.4,-0.7 -4.7,-1.6 -7,-2.4c-10.4,8.5 -21.4,17.3 -27.9,29.4c-4.7,8.00001 -4.1,18.9 1.7,26.00001c4.6,5.7 12.1,8 19.2,8.09999c6.8,0 13.6,-0.89999 20.2,-2.09999c8.10001,-1.5 15.8,-4.8 23.90001,-6.10001c-12.40001,9.10001 -27.7,14.10001 -43.10001,15.10001c-8.5,0.5 -17.6,-0.3 -24.8,-5.40001c-8.5,-5.59999 -12.5,-16.7 -10.89999,-26.7c1.8,-10.9 6.8,-21.3 14.39999,-29.3c2.4,-2.8 5.7,-4.5 8.9,-6.2c2.8,-1.3 4.2,-4.4 6.7,-6.1c2,0.3 3.8,1.1 5.7,1.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="o" d="m179.10001,114c17.2,-2 35.29999,-1.7 51.29999,5.6c8.8,4 15.5,12.7 16.20001,22.50001c0.2,3.2 0.79999,7.2 -1.90001,9.59999c-9.2,9.90001 -22.59999,14.60001 -35.5,17.40001c-15.39999,2.79999 -32.5,1.39999 -45.59999,-7.70001c-2.90001,-2.39999 -7,-5 -6.70001,-9.29999c0,-8.3 2.3,-17 8,-23.20001c4.70001,-5.39999 11,-8.89999 17.3,-12.2c-1,-0.89999 -2,-1.8 -3.09999,-2.7m16.29999,7.7c-5.5,0.60001 -10.29999,3.5 -15.39999,5.2c-3.8,1.2 -7.39999,2.99999 -9.89999,6.2c-3.20001,3.2 -3.8,7.59999 -4.10001,11.89999c0,2.89999 -2.60001,6.39999 0.10001,8.8c4.79999,5.09999 11.79999,8.5 18.89999,8.5c8.7,0.2 17.39999,0.09999 26.10001,-1.10001c4.79999,-0.7 9.7,-0.2 14.5,-0.8c7.29999,-1.79999 13.09999,-8.79999 13.29999,-16.39999c0.5,-6.7 -3.09999,-13.5 -8.89999,-17c-4.8,-3 -10.39999,-3.8 -15.8,-5.2c-6.2,-1.60001 -12.59999,-0.8 -18.8,-0.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="m" d="m269.20001,156.10001c10.89999,-13.40001 13.39999,-32.2 26.79999,-43.7c1.79999,1.2 4.70001,1.9 4.60001,4.6c0.89999,8.4 1.60001,16.89999 3.79999,25.10001c6.60001,-5 8.39999,-13.40001 12.5,-20.2c2.30002,-3.9 6.39999,-6.1 10.70001,-7c0.79999,9.7 2.60001,19.9 9,27.49999c4,4.8 11.10001,7.90001 17.10001,5.3c3.79999,-1.59999 7.5,-3.59999 11.69998,-4c-1,6.2 -7.69998,8 -12.60001,10.10001c-5.89999,2.7 -12.59998,0.5 -17.69998,-2.90001c-6.70001,-4.79999 -10.70001,-12.39999 -13.80002,-19.89999c-5.39999,5.3 -6.5,13.3 -11.09998,19.10001c-2.20001,2.89999 -5.80002,4 -9.20001,4.5c-4.70001,-8.90001 -5.39999,-19.20001 -7.39999,-28.90001c-9.30002,12.5 -13.30002,27.8 -18.89999,42.10001c-1.5,2.89999 -5,3.8 -7.60001,5.39999c-4.89999,-13.3 -9.89999,-26.89999 -11,-41.09999c-0.10001,-5.10001 -0.20001,-11.40001 4.29999,-14.7c1.89999,-0.6 3.70001,1.1 4.5,2.7c1.39999,3.1 1.20001,6.6 1.30002,9.9c0,8.8 0.29999,17.7 3,26.10001z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="i" d="m380.10001,113c1.10001,-1.8 3.5,-0.9 4.79999,0.2c0.20001,5.3 -0.69998,10.5 -0.39999,15.8c0.5,13.39999 7,25.5 11.60001,37.8c-1.60001,0.5 -3.30002,1 -4.89999,1.5c-6.90002,-10.8 -11.80002,-22.90001 -14.10001,-35.5c-0.80002,-6.60001 -1.89999,-14.4 3,-19.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="idot" d="m380.5,78.8c2.20001,-0.3 4.70001,-1.60001 6.60001,0.1c3.79999,3 6.19998,7.3 8.89999,11.3c-4.29999,1.8 -8.10001,-1.6 -11.5,-3.7c-2.79999,-1.6 -3.29999,-4.9 -4,-7.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="n" d="m444.39999,125.3c2,0 4,0.1 6,0.1c3.39999,10.99999 6,22.2 10.5,32.8c3.70001,9.3 10.80002,17.10001 19.10001,22.8c4.70001,3.3 10.70001,3.5 16.10001,2.2c5.5,-1.09999 10.29999,-4.09999 15.39999,-6.39999c-1.10001,3.39999 -3.79999,6 -6.89999,7.7c-4,2.10001 -7.80002,5.5 -12.60001,4.8c-10.29999,-0.8 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10001,-26.60001 -18.70001,-40.8c-10.5,9 -12.29999,23.89999 -22.20001,33.3c-2.19998,2.2 -4.79999,3.7 -7.5,5.09999c-1.69998,-2 -3.59998,-3.89999 -4.89999,-6.2c-0.10001,-5.8 0.70001,-11.59999 0.10001,-17.5c-0.60001,-8.3 -0.89999,-17.59999 4.79999,-24.39999c2.10001,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60001,9 -1.70001,13.59999c0,4.60001 -0.29999,9.2 -0.60001,13.90001c9.60001,-10.10001 16.80002,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="g" d="m524.5,125.5c8.20001,-5.1 20.90002,-3.9 26.09998,4.89999c3.20001,4.8 1.70001,10.8 0.60004,16c2.59998,-1.29999 5,-3.2 7.79999,-4.09999c1.59998,-0.10001 4,0.39999 4.20001,2.39999c1.70001,9.90001 -0.29999,20.3 3.29999,29.90001c1.40002,3.29999 -1,6.89999 0.70001,10.09999c7.09998,19.10001 17.09998,36.90001 28.09998,54c3.79999,5.3 2.40002,12.3 2.5,18.40001c0.29999,6.29999 -6,9.89999 -11.09998,11.60001c-15.79999,4.79999 -33,2.59998 -48.29999,-3.10001c-6.40002,-2.60001 -13.40002,-5.89999 -16.60004,-12.3c-3.79999,-8.2 -3,-17.8 -1.59998,-26.5c1.5,9.59999 2.70001,20.09999 9.09998,27.89999c2.10004,2.8 5.70001,3.3 8.90002,4.2c7.89996,1.89999 15.79999,3.80002 23.79999,5.20001c4.40002,0.89999 8.70001,-1.30002 12.90002,-2.20001c4.79999,-1.29999 10.39996,-2.19998 13.69995,-6.39999c1.10004,-1.2 0.5,-2.89999 0.30005,-4.3c-5.5,-23.7 -23.60004,-41.89999 -29.60004,-65.5c-1.79999,-9.8 -1.09998,-20.2 -5.59998,-29.5c-2.5,0.60001 -5.10004,1 -7.5,2c-2.29999,0.90001 -3.5,4 -6.20001,4c-9.40002,0.40001 -17.59998,5.2 -26.59998,7.2c-5.40002,1.20001 -11.50003,2.60001 -16.70001,-0.2c-4.20001,-2.2 -6.20001,-7.5 -4.70001,-12c2.39999,-8 8.60001,-14.2 14.79999,-19.5c5.5,-4.59999 11.70001,-8.3 17.70001,-12.2m9.29999,5.3c-7.29999,2.2 -13.59998,6.7 -19.39996,11.5c-5.80002,4.89999 -11.30002,10.5 -14.40002,17.59999c6.20001,2.60001 13.20001,3.40001 19.79999,1.8c10,-2.39999 19.70001,-6.39999 28.90002,-11.09999c1.20001,-3.70001 0.59998,-7.8 0.79999,-11.70001c0.09998,-3.29999 -2.59998,-5.59999 -5.09998,-7.39999c-3.10004,-2.10001 -7.20001,-1.7 -10.60004,-0.7z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="s" d="m702,92c6.5,-2.9 14.20001,-3.4 20.70001,-0.2c-1.10004,6.3 -5.70001,11.1 -11.5,13.5c-1.10004,-1.2 -2.10004,-2.5 -3.40002,-3.60001c-10.59998,0.5 -17.89996,9.3 -25.79999,15.3c10.79999,0.9 21.70001,1 32.5,2.4c11.20001,1.1 22.79999,3.2 32.40002,9.7c3.09998,1.7 2.59998,5.79999 2.59998,8.89999c-0.40002,9.89999 -7.59998,17.89999 -15.70001,22.8c-6.20001,4 -13.70001,5 -19.79999,9.2c-3.40002,2.10001 -7.20001,5.2 -11.5,3.5c-7,-2.2 -9.20001,-10.7 -7.40002,-17.2c3.30005,2.2 2,8.7 6.90002,8.59999c7.20001,0.8 13.20001,-3.7 19.29999,-6.7c4.40002,-2.5 9.29999,-4.3 12.90002,-8c2.70001,-4 4.09998,-8.8 7.59998,-12.3c-6.09998,-9.2 -17.89996,-11.3 -28.09998,-12.39999c-11.29999,-1.4 -22.5,0.5 -33.70001,1.7c-4.29999,0 -9.59998,0.7 -13.09998,-2.39999c0.19995,-3.5 1.29999,-7.3 4,-9.9c1.5,-0.4 3.19995,-0.4 4.89996,-0.5c7.29999,-8.9 15.29999,-17.9 26.20001,-22.4z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="otwo" d="m781.09998,114c17.20001,-2 35.30005,-1.7 51.30005,5.6c8.79999,4 15.5,12.7 16.19995,22.50001c0.20001,3.2 0.80005,7.2 -1.79999,9.59999c-9.09998,9.7 -22.20001,14.40001 -34.79999,17.2c-15.59998,3.10001 -33.09998,1.8 -46.40002,-7.5c-2.89996,-2.39999 -7,-5 -6.69995,-9.29999c0,-8.3 2.29999,-17 8,-23.20001c4.69995,-5.39999 11,-8.99999 17.29999,-12.2c-1,-0.89999 -2,-1.8 -3.10004,-2.7m-8.29999,20.8c-2.59998,1.89999 -1.89996,5.2 -2.39996,8c-0.40002,3.2 -2.5,5.7 -4.20001,8.3c4.09998,6.79999 12.09998,10 19.70001,10.79999c11.39996,1.10001 23,0.20001 34.19995,-1.7c4.60004,-0.7 8.20001,-3.8 12.10004,-6c3.5,-2.09999 7,-5.09999 8,-9.3c1.09998,-4.89999 -0.90002,-10.2 -4,-14c-4,-4.99999 -10.20001,-7.2 -16.29999,-7.99999c-0.5,4.5 0.09998,9.49999 -2.5,13.49999c-0.90002,0.90001 -3.40002,2.3 -3.70001,0.3c0,-1.7 0.5,-3.39999 0.5,-5.09999c-3.29999,-7.40001 -12.20001,-11.50001 -20,-9.3c-8,2.3 -15.29999,6.8 -21.40002,12.5z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="othree" d="m899.40002,113.6c5.59998,-1.3 11.39996,0.1 17,1c9.09998,1.9 18.79999,4.7 25.29999,11.8c5.5,5.9 8,14.4 6.79999,22.4c-0.29999,1.59999 -1.70001,2.8 -2.70001,4c-7.09998,7 -16.5,11.2 -25.89996,14.09999c-13.40002,4.20001 -28.10004,4.90001 -41.5,0.70001c-7.30005,-2.40001 -14.90002,-6.10001 -19.20001,-12.8c-0.79999,-5.5 0.29999,-11.2 2.09998,-16.5c3.20001,-9 11.10004,-15.3 19.29999,-19.7c5.80005,-3.3 12.60004,-3.1 18.80005,-5m-6,8.9c-10.10004,2.7 -17.5,10.39999 -26.30005,15.7c-3.29999,3.3 -2.89996,8.90001 -1.19995,12.90001c3.39996,5.59999 9.79999,8.59999 15.89996,10.09999c5.90002,1.40001 11,5.5 17.20001,5.3c10.40002,-1.10001 20.59998,-4.5 29.40002,-10.10001c4,-2.39999 8.69995,-4.7 10.89996,-9.09999c2.5,-4.90001 0.70001,-10.90001 -2.29999,-15.3c-3.40002,-5 -9.29999,-7.7 -15.09998,-8.9c-5.20001,-1.4 -10.60004,-0.5 -15.90002,-0.8c-4.20001,-0.2 -8.5,-1 -12.59998,0.2z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
<path id="ntwo" d="m992.40002,125.3c2,0 4,0.1 6,0.1c2.09998,6.99999 4.09998,13.99999 6.19995,20.99999c3,9.40001 6.5,19.10001 13.70001,26.3c5.29999,5.3 11.60004,11.5 19.70001,11.2c7.80005,0.10001 14.69995,-3.79999 21.5,-7.09999c-1.09998,3.39999 -3.80005,6 -6.90002,7.7c-4,2.10001 -7.79993,5.5 -12.59998,4.8c-10.30005,-0.90001 -21.29999,-3.90001 -28.29999,-12c-10.70001,-11.10001 -14.10004,-26.60001 -18.70001,-40.8c-10.70001,9.10001 -12.40002,24.5 -22.70001,33.8c-2.09998,1.89999 -4.59998,3.3 -7,4.59999c-1.70001,-2 -3.59998,-3.89999 -4.89996,-6.2c-0.10004,-5.5 0.59998,-11.09999 0.19995,-16.59999c-0.59998,-8.60001 -1.19995,-18.20001 4.70001,-25.3c2.10004,0.89999 4.70001,1.59999 5.90002,3.8c0,4.5 -1.60004,9 -1.60004,13.59999c-0.09998,4.60001 -0.39996,9.2 -0.69995,13.90001c9.59998,-10.10001 16.79999,-22 25.5,-32.8z" stroke-width="0.09375" stroke="#7644b6" fill="#7644b6">
</path>
</svg>
JS:
<script>
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $c = $("path#c");
var $o = $("path#o");
var $m = $("path#m");
var $i = $("path#i");
var $idot = $("path#idot");
var $n = $("path#n");
var $g = $("path#g");
var $s = $("path#s");
var $otwo = $("path#otwo");
var $othree = $("path#othree");
var $ntwo = $("path#ntwo");
// prepare SVG
pathPrepare($c);
pathPrepare($o);
pathPrepare($m);
pathPrepare($i);
pathPrepare($idot);
pathPrepare($n);
pathPrepare($g);
pathPrepare($s);
pathPrepare($otwo);
pathPrepare($othree);
pathPrepare($ntwo);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($c, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($o, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($m, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($i, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($idot, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($n, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($g, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($s, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($otwo, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($othree, 0.9, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw word for 0.9
.add(TweenMax.to($ntwo, 0.1, {
strokeDashoffset: 0, ease:Linear.easeNone}
)) // draw dot for 0.1
.add(TweenMax.to("path", 20, {
stroke: "#33629c", ease:Linear.easeNone}
), 0);
// change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({
triggerElement: "#trigger1", duration: 200, tweenChanges: true}
)
.setTween(tween)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
</script>
the reason is that you actually don't use paths, but shapes with fills.
You can only animate strokes this way, not fillings.
The stroke in this case is the (invisible) outline of each letter.
That is why it's not working.
regards,
J