I have this SVG image:
and I want to stretch (or fit) inside a QML Image.
I wrote this code:
import QtQuick 2.0
Rectangle {
width: 250
height: 250
color: "yellow" // just to see the actual area
Image {
id: image
x: 0
y: 0
width: 250
height: 250
source: "file:///home/mark/headphones.svg"
sourceSize: Qt.size(width, height)
fillMode: Image.Stretch
}
}
Here the result:
Using fillMode: Image.Stretch or fillMode: Image.PreserveAspectFit I expect the image would actually fit the constraint of the desired size.
What am I missing here?
I'm run Qt 6.2.0 on Ubuntu Desktop 20.04.
UPDATE
Here the source code of the SVG file:
<?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"
id="svg11"
height="100%"
width="100%"
version="1.0">
<metadata
id="metadata15">
<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="defs3">
<pattern
y="0"
x="0"
height="6"
width="6"
patternUnits="userSpaceOnUse"
id="WMFhbasepattern" />
</defs>
<path
id="path5"
d=" M 25.074798,99.853263 L 25.097666,99.07575 L 25.131968,98.309671 L 25.200572,97.555026 L 25.292044,96.788947 L 25.417818,96.034302 L 25.56646,95.279657 L 25.749404,94.525012 L 25.943783,93.793235 L 26.172463,93.061458 L 26.435445,92.329681 L 26.709862,91.620772 L 27.01858,90.911863 L 27.350167,90.225822 L 27.704621,89.539781 L 28.081944,88.876608 L 28.482134,88.213435 L 28.905193,87.584564 L 29.362554,86.955693 L 29.831348,86.34969 L 30.323011,85.755121 L 30.837542,85.183421 L 31.363506,84.623154 L 31.923773,84.085755 L 32.495474,83.571224 L 33.090043,83.079562 L 33.696046,82.599333 L 34.324917,82.153406 L 34.965222,81.718914 L 35.61696,81.318723 L 36.291567,80.929967 L 36.966174,80.575512 L 37.663649,80.243926 L 38.372558,79.935207 L 39.092901,79.649357 L 39.824678,79.397808 L 40.556455,79.157694 L 41.299667,78.963316 L 42.054312,78.780372 L 42.808957,78.631729 L 43.563602,78.505955 L 44.329681,78.403049 L 45.107194,78.334445 L 45.873273,78.300143 L 46.639352,78.288709 L 47.416865,78.300143 L 48.182944,78.334445 L 48.937589,78.403049 L 49.703668,78.505955 L 50.458313,78.620295 L 51.212959,78.780372 L 51.967604,78.951882 L 52.699381,79.157694 L 53.431158,79.386374 L 54.162935,79.637923 L 54.871844,79.912339 L 55.580753,80.221058 L 56.266794,80.552644 L 56.952835,80.907099 L 57.627442,81.284421 L 58.279181,81.684612 L 58.919485,82.119104 L 59.536922,82.565031 L 60.142925,83.033826 L 60.737494,83.525488 L 61.309195,84.040019 L 61.869462,84.577418 L 62.40686,85.126251 L 62.921391,85.697951 L 63.413054,86.29252 L 63.893283,86.898523 L 64.339209,87.527394 L 64.773702,88.167699 L 65.173892,88.819438 L 65.562649,89.494045 L 65.917103,90.180086 L 66.24869,90.866127 L 66.557408,91.575036 L 66.843259,92.295379 L 67.106241,93.027156 L 67.334921,93.758933 L 67.540734,94.502144 L 67.712244,95.256789 L 67.860886,96.011434 L 67.98666,96.777513 L 68.089566,97.543592 L 68.158171,98.309671 L 68.192473,99.07575 L 68.203907,99.853263 L 68.203907,135.55026 L 68.192473,136.31634 L 68.158171,137.08242 L 68.089566,137.8485 L 67.98666,138.60314 L 67.87232,139.36922 L 67.723678,140.12387 L 67.540734,140.86708 L 67.334921,141.61029 L 67.106241,142.34207 L 66.854693,143.06241 L 66.580276,143.77132 L 66.271558,144.48023 L 65.939971,145.1777 L 65.585517,145.85231 L 65.208194,146.52692 L 64.808004,147.17866 L 64.373511,147.81896 L 63.927585,148.4364 L 63.45879,149.0424 L 62.967127,149.63697 L 62.452596,150.20867 L 61.915198,150.76894 L 61.366365,151.30634 L 60.794664,151.82087 L 60.200095,152.31253 L 59.594092,152.79276 L 58.965222,153.23869 L 58.324917,153.67318 L 57.673178,154.07337 L 56.998571,154.46212 L 56.31253,154.81658 L 55.626489,155.14817 L 54.91758,155.45688 L 54.197237,155.74273 L 53.46546,156.00572 L 52.733683,156.2344 L 51.990472,156.44021 L 51.235827,156.61172 L 50.481182,156.7718 L 49.715102,156.88614 L 48.960457,156.98904 L 48.182944,157.05765 L 47.416865,157.09195 L 46.639352,157.11482 L 45.873273,157.09195 L 45.107194,157.05765 L 44.341115,156.98904 L 43.58647,156.88614 L 42.820391,156.7718 L 42.07718,156.62315 L 41.322535,156.44021 L 40.579323,156.24583 L 39.847546,156.01715 L 39.127203,155.75417 L 38.418294,155.47975 L 37.709385,155.17103 L 37.01191,154.83945 L 36.337303,154.48499 L 35.662697,154.10767 L 35.010958,153.70748 L 34.370653,153.28442 L 33.753216,152.82706 L 33.147213,152.35827 L 32.552644,151.8666 L 31.980943,151.35207 L 31.420677,150.82611 L 30.883278,150.26584 L 30.368747,149.69414 L 29.877084,149.09957 L 29.396856,148.49357 L 28.950929,147.8647 L 28.516436,147.22439 L 28.116246,146.57265 L 27.727489,145.89805 L 27.373035,145.22344 L 27.041448,144.52596 L 26.73273,143.81706 L 26.446879,143.09671 L 26.183897,142.36494 L 25.955217,141.63316 L 25.749404,140.88995 L 25.577894,140.1353 L 25.417818,139.38066 L 25.303478,138.62601 L 25.200572,137.85993 L 25.131968,137.08242 L 25.097666,136.31634 L 25.074798,135.55026 L 25.074798,99.853263 z "
style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;" />
<path
id="path7"
d=" M 114.72892,99.853263 L 114.75179,99.07575 L 114.78609,98.309671 L 114.85469,97.555026 L 114.9576,96.788947 L 115.07194,96.034302 L 115.22058,95.279657 L 115.40353,94.525012 L 115.5979,93.793235 L 115.82658,93.061458 L 116.08957,92.329681 L 116.36398,91.620772 L 116.6727,90.911863 L 117.00429,90.225822 L 117.35874,89.539781 L 117.73606,88.876608 L 118.13626,88.213435 L 118.57075,87.584564 L 119.01667,86.955693 L 119.48547,86.34969 L 119.97713,85.755121 L 120.49166,85.183421 L 121.02906,84.623154 L 121.57789,84.085755 L 122.1496,83.571224 L 122.74416,83.079562 L 123.35017,82.599333 L 123.97904,82.153406 L 124.61934,81.718914 L 125.27108,81.318723 L 125.94569,80.929967 L 126.63173,80.575512 L 127.31777,80.243926 L 128.02668,79.935207 L 128.74702,79.649357 L 129.4788,79.397808 L 130.21058,79.157694 L 130.95379,78.963316 L 131.70843,78.780372 L 132.46308,78.631729 L 133.21772,78.505955 L 133.9838,78.403049 L 134.76131,78.334445 L 135.52739,78.300143 L 136.30491,78.288709 L 137.07099,78.300143 L 137.83707,78.334445 L 138.60314,78.403049 L 139.35779,78.505955 L 140.12387,78.620295 L 140.86708,78.780372 L 141.62172,78.951882 L 142.36494,79.157694 L 143.09671,79.386374 L 143.81706,79.637923 L 144.52596,79.912339 L 145.23487,80.221058 L 145.93235,80.552644 L 146.60696,80.907099 L 147.28156,81.284421 L 147.9333,81.684612 L 148.57361,82.119104 L 149.19104,82.565031 L 149.79705,83.033826 L 150.39162,83.525488 L 150.96332,84.040019 L 151.52358,84.577418 L 152.06098,85.126251 L 152.57551,85.697951 L 153.06717,86.29252 L 153.5474,86.898523 L 153.99333,87.527394 L 154.42782,88.167699 L 154.82801,88.819438 L 155.21677,89.494045 L 155.57122,90.180086 L 155.90281,90.866127 L 156.21153,91.575036 L 156.49738,92.295379 L 156.76036,93.027156 L 156.98904,93.758933 L 157.19485,94.502144 L 157.36636,95.256789 L 157.51501,96.011434 L 157.64078,96.777513 L 157.74369,97.543592 L 157.81229,98.309671 L 157.84659,99.07575 L 157.86946,99.853263 L 157.86946,135.55026 L 157.84659,136.31634 L 157.81229,137.08242 L 157.74369,137.8485 L 157.64078,138.60314 L 157.52644,139.36922 L 157.3778,140.12387 L 157.19485,140.86708 L 157.00048,141.61029 L 156.7718,142.34207 L 156.50881,143.06241 L 156.2344,143.77132 L 155.92568,144.48023 L 155.59409,145.1777 L 155.23964,145.85231 L 154.86232,146.52692 L 154.46212,147.17866 L 154.03907,147.81896 L 153.58171,148.4364 L 153.11291,149.0424 L 152.62125,149.63697 L 152.10672,150.20867 L 151.56932,150.76894 L 151.02049,151.30634 L 150.44879,151.82087 L 149.85422,152.31253 L 149.24821,152.79276 L 148.61934,153.23869 L 147.97904,153.67318 L 147.3273,154.07337 L 146.65269,154.46212 L 145.96665,154.81658 L 145.28061,155.14817 L 144.5717,155.45688 L 143.85136,155.74273 L 143.11958,156.00572 L 142.3878,156.2344 L 141.64459,156.44021 L 140.88995,156.61172 L 140.1353,156.7718 L 139.38066,156.88614 L 138.61458,156.98904 L 137.83707,157.05765 L 137.07099,157.09195 L 136.30491,157.11482 L 135.52739,157.09195 L 134.76131,157.05765 L 133.99524,156.98904 L 133.24059,156.88614 L 132.48595,156.7718 L 131.7313,156.62315 L 130.97666,156.44021 L 130.23344,156.24583 L 129.50167,156.01715 L 128.78132,155.75417 L 128.07242,155.47975 L 127.36351,155.17103 L 126.66603,154.83945 L 125.99142,154.48499 L 125.31682,154.10767 L 124.66508,153.70748 L 124.02477,153.28442 L 123.40734,152.82706 L 122.80133,152.35827 L 122.20677,151.8666 L 121.63506,151.35207 L 121.0748,150.82611 L 120.5374,150.26584 L 120.02287,149.69414 L 119.53121,149.09957 L 119.05098,148.49357 L 118.60505,147.8647 L 118.17056,147.22439 L 117.77037,146.57265 L 117.38161,145.89805 L 117.02716,145.22344 L 116.69557,144.52596 L 116.38685,143.81706 L 116.101,143.09671 L 115.83802,142.36494 L 115.60934,141.63316 L 115.40353,140.88995 L 115.23202,140.1353 L 115.08337,139.38066 L 114.9576,138.62601 L 114.85469,137.85993 L 114.78609,137.08242 L 114.75179,136.31634 L 114.72892,135.55026 L 114.72892,99.853263 z "
style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;" />
<path
id="path9"
d=" M 13.332063,126.6546 L 13.332063,83.55979 L 13.686517,76.264888 L 14.887089,69.427346 L 16.888042,62.818485 L 19.666508,56.449738 L 23.165317,50.355407 L 27.327299,44.592663 L 32.152454,39.150071 L 37.503573,34.16484 L 43.41496,29.568366 L 49.760838,25.486422 L 56.518342,21.919009 L 63.607432,18.934731 L 70.993807,16.533587 L 78.563125,14.795617 L 86.315388,13.720819 L 94.113387,13.354931 L 100.505,13.732253 L 106.99952,14.864221 L 113.59695,16.716532 L 120.19438,19.254883 L 126.70033,22.422106 L 133.02334,26.161029 L 139.10624,30.448785 L 144.84612,35.205336 L 150.17437,40.396379 L 154.97666,45.907575 L 159.23011,51.750357 L 162.83182,57.810386 L 165.7132,64.019057 L 167.83992,70.330634 L 169.1434,76.699381 L 169.6122,83.319676 L 169.6122,126.6546 L 182.94426,126.6546 L 182.94426,82.850881 L 182.38399,74.892806 L 180.73749,66.866127 L 178.1191,59.068128 L 174.63173,51.567413 L 170.36684,44.398285 L 165.42735,37.606479 L 159.85898,31.214864 L 153.77608,25.292044 L 147.22439,19.860886 L 140.28394,14.967127 L 133.01191,10.656503 L 125.49976,7.0090519 L 117.79323,4.0476417 L 109.9495,1.8523106 L 102.04859,0.46879466 L 94.204859,0 L 85.091949,0.4230586 L 76.161982,1.6579323 L 67.426394,3.6817532 L 58.953788,6.4259171 L 50.801334,9.867556 L 43.037637,13.960934 L 35.696999,18.683182 L 28.870891,23.977132 L 22.559314,29.86565 L 16.922344,36.234397 L 11.948547,43.117675 L 7.740829,50.446879 L 4.3563602,58.199142 L 1.8866127,66.340162 L 0.41162458,74.7899 L 0,83.251072 L 0,126.6546 L 13.332063,126.6546 z "
style="fill:#000000;fill-rule:nonzero;fill-opacity:1;stroke:none;" />
</svg>
your SVG File has a problem :
I update something in your code too :
Rectangle {
width: 250
height: 250
color: "yellow" // just to see the actual area
Image {
id:img
anchors.fill: parent
source: "img.svg"
sourceSize: Qt.size(width, height)
fillMode: Image.Stretch
}
}
SVG :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="svg11"
height="166"
width="200"
version="1.0"
sodipodi:docname="img.svg"
inkscape:version="1.1 (ce6663b3b7, 2021-05-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<sodipodi:namedview
id="namedview9"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="1.2280088"
inkscape:cx="144.13578"
inkscape:cy="67.996257"
inkscape:window-width="1366"
inkscape:window-height="670"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<metadata
id="metadata15">
<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="defs3">
<pattern
y="0"
x="0"
height="6"
width="6"
patternUnits="userSpaceOnUse"
id="WMFhbasepattern" />
</defs>
<path
id="path5"
d="m 34.080029,104.54594 0.02287,-0.77751 0.0343,-0.76608 0.0686,-0.75465 0.09147,-0.76607 0.125774,-0.75465 0.148642,-0.754644 0.182944,-0.754645 0.194379,-0.731777 0.22868,-0.731777 0.262982,-0.731777 0.274417,-0.708909 0.308718,-0.708909 0.331587,-0.686041 0.354454,-0.686041 0.377323,-0.663173 0.40019,-0.663173 0.423059,-0.628871 0.457361,-0.628871 0.468794,-0.606003 0.491663,-0.594569 0.514531,-0.5717 0.525964,-0.560267 0.560267,-0.537399 0.571701,-0.514531 0.594569,-0.491662 0.606003,-0.480229 0.628871,-0.445927 0.640305,-0.434492 0.651738,-0.400191 0.674607,-0.388756 0.674607,-0.354455 0.697475,-0.331586 0.708909,-0.308719 0.720343,-0.28585 0.731777,-0.251549 0.731777,-0.240114 0.743212,-0.194378 0.754645,-0.182944 0.754645,-0.148643 0.754645,-0.125774 0.766079,-0.102906 0.777513,-0.0686 0.766079,-0.0343 0.766079,-0.01143 0.777513,0.01143 0.766079,0.0343 0.754645,0.0686 0.766079,0.102906 0.754645,0.11434 0.754646,0.160077 0.754645,0.17151 0.731777,0.205812 0.731777,0.22868 0.731777,0.251549 0.708909,0.274416 0.708909,0.308719 0.686041,0.331586 0.686041,0.354455 0.674607,0.377322 0.651739,0.400191 0.640304,0.434492 0.617437,0.445927 0.606003,0.468795 0.594569,0.491662 0.571701,0.514531 0.560267,0.537399 0.537398,0.548833 0.514531,0.5717 0.491663,0.594569 0.480229,0.606003 0.445926,0.628871 0.434493,0.640305 0.40019,0.651739 0.388757,0.674607 0.354454,0.686041 0.331587,0.686041 0.308718,0.708909 0.285851,0.720343 0.262982,0.731777 0.22868,0.731777 0.205813,0.743211 0.17151,0.754645 0.148642,0.754642 0.125774,0.76608 0.102906,0.76608 0.0686,0.76608 0.0343,0.76608 0.01143,0.77751 v 35.697 l -0.01143,0.76608 -0.0343,0.76608 -0.0686,0.76608 -0.102906,0.75464 -0.11434,0.76608 -0.148642,0.75465 -0.182944,0.74321 -0.205813,0.74321 -0.22868,0.73178 -0.251548,0.72034 -0.274417,0.70891 -0.308718,0.70891 -0.331587,0.69747 -0.354454,0.67461 -0.377323,0.67461 -0.40019,0.65174 -0.434493,0.6403 -0.445926,0.61744 -0.468795,0.606 -0.491663,0.59457 -0.514531,0.5717 -0.537398,0.56027 -0.548833,0.5374 -0.571701,0.51453 -0.594569,0.49166 -0.606003,0.48023 -0.62887,0.44593 -0.640305,0.43449 -0.651739,0.40019 -0.674607,0.38875 -0.686041,0.35446 -0.686041,0.33159 -0.708909,0.30871 -0.720343,0.28585 -0.731777,0.26299 -0.731777,0.22868 -0.743211,0.20581 -0.754645,0.17151 -0.754645,0.16008 -0.76608,0.11434 -0.754645,0.1029 -0.777513,0.0686 -0.766079,0.0343 -0.777513,0.0229 -0.766079,-0.0229 -0.766079,-0.0343 -0.766079,-0.0686 -0.754645,-0.1029 -0.766079,-0.11434 -0.743211,-0.14865 -0.754645,-0.18294 -0.743212,-0.19438 -0.731777,-0.22868 -0.720343,-0.26298 -0.708909,-0.27442 -0.708909,-0.30872 -0.697475,-0.33158 -0.674607,-0.35446 -0.674606,-0.37732 -0.651739,-0.40019 -0.640305,-0.42306 -0.617437,-0.45736 -0.606003,-0.46879 -0.594569,-0.49167 -0.571701,-0.51453 -0.560266,-0.52596 -0.537399,-0.56027 -0.514531,-0.5717 -0.491663,-0.59457 -0.480228,-0.606 -0.445927,-0.62887 -0.434493,-0.64031 -0.40019,-0.65174 -0.388757,-0.6746 -0.354454,-0.67461 -0.331587,-0.69748 -0.308718,-0.7089 -0.285851,-0.72035 -0.262982,-0.73177 -0.22868,-0.73178 -0.205813,-0.74321 -0.17151,-0.75465 -0.160076,-0.75464 -0.11434,-0.75465 -0.102906,-0.76608 -0.0686,-0.77751 -0.0343,-0.76608 -0.02287,-0.76608 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
id="path7"
d="m 123.73415,104.54594 0.0229,-0.77751 0.0343,-0.76608 0.0686,-0.75465 0.10291,-0.76607 0.11434,-0.75465 0.14864,-0.754644 0.18295,-0.754645 0.19437,-0.731777 0.22868,-0.731777 0.26299,-0.731777 0.27441,-0.708909 0.30872,-0.708909 0.33159,-0.686041 0.35445,-0.686041 0.37732,-0.663173 0.4002,-0.663173 0.43449,-0.628871 0.44592,-0.628871 0.4688,-0.606003 0.49166,-0.594569 0.51453,-0.5717 0.5374,-0.560267 0.54883,-0.537399 0.57171,-0.514531 0.59456,-0.491662 0.60601,-0.480229 0.62887,-0.445927 0.6403,-0.434492 0.65174,-0.400191 0.67461,-0.388756 0.68604,-0.354455 0.68604,-0.331586 0.70891,-0.308719 0.72034,-0.28585 0.73178,-0.251549 0.73178,-0.240114 0.74321,-0.194378 0.75464,-0.182944 0.75465,-0.148643 0.75464,-0.125774 0.76608,-0.102906 0.77751,-0.0686 0.76608,-0.0343 0.77752,-0.01143 0.76608,0.01143 0.76608,0.0343 0.76607,0.0686 0.75465,0.102906 0.76608,0.11434 0.74321,0.160077 0.75464,0.17151 0.74322,0.205812 0.73177,0.22868 0.72035,0.251549 0.7089,0.274416 0.70891,0.308719 0.69748,0.331586 0.67461,0.354455 0.6746,0.377322 0.65174,0.400191 0.64031,0.434492 0.61743,0.445927 0.60601,0.468795 0.59457,0.491662 0.5717,0.514531 0.56026,0.537399 0.5374,0.548833 0.51453,0.5717 0.49166,0.594569 0.48023,0.606003 0.44593,0.628871 0.43449,0.640305 0.40019,0.651739 0.38876,0.674607 0.35445,0.686041 0.33159,0.686041 0.30872,0.708909 0.28585,0.720343 0.26298,0.731777 0.22868,0.731777 0.20581,0.743211 0.17151,0.754645 0.14865,0.754642 0.12577,0.76608 0.10291,0.76608 0.0686,0.76608 0.0343,0.76608 0.0229,0.77751 v 35.697 l -0.0229,0.76608 -0.0343,0.76608 -0.0686,0.76608 -0.10291,0.75464 -0.11434,0.76608 -0.14864,0.75465 -0.18295,0.74321 -0.19437,0.74321 -0.22868,0.73178 -0.26299,0.72034 -0.27441,0.70891 -0.30872,0.70891 -0.33159,0.69747 -0.35445,0.67461 -0.37732,0.67461 -0.4002,0.65174 -0.42305,0.6403 -0.45736,0.61744 -0.4688,0.606 -0.49166,0.59457 -0.51453,0.5717 -0.5374,0.56027 -0.54883,0.5374 -0.5717,0.51453 -0.59457,0.49166 -0.60601,0.48023 -0.62887,0.44593 -0.6403,0.43449 -0.65174,0.40019 -0.67461,0.38875 -0.68604,0.35446 -0.68604,0.33159 -0.70891,0.30871 -0.72034,0.28585 -0.73178,0.26299 -0.73178,0.22868 -0.74321,0.20581 -0.75464,0.17151 -0.75465,0.16008 -0.75464,0.11434 -0.76608,0.1029 -0.77751,0.0686 -0.76608,0.0343 -0.76608,0.0229 -0.77752,-0.0229 -0.76608,-0.0343 -0.76607,-0.0686 -0.75465,-0.1029 -0.75464,-0.11434 -0.75465,-0.14865 -0.75464,-0.18294 -0.74322,-0.19438 -0.73177,-0.22868 -0.72035,-0.26298 -0.7089,-0.27442 -0.70891,-0.30872 -0.69748,-0.33158 -0.67461,-0.35446 -0.6746,-0.37732 -0.65174,-0.40019 -0.64031,-0.42306 -0.61743,-0.45736 -0.60601,-0.46879 -0.59456,-0.49167 -0.57171,-0.51453 -0.56026,-0.52596 -0.5374,-0.56027 -0.51453,-0.5717 -0.49166,-0.59457 -0.48023,-0.606 -0.44593,-0.62887 -0.43449,-0.64031 -0.40019,-0.65174 -0.38876,-0.6746 -0.35445,-0.67461 -0.33159,-0.69748 -0.30872,-0.7089 -0.28585,-0.72035 -0.26298,-0.73177 -0.22868,-0.73178 -0.20581,-0.74321 -0.17151,-0.75465 -0.14865,-0.75464 -0.12577,-0.75465 -0.10291,-0.76608 -0.0686,-0.77751 -0.0343,-0.76608 -0.0229,-0.76608 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
id="path9"
d="M 22.337294,131.34728 V 88.252469 l 0.354454,-7.294902 1.200572,-6.837542 2.000953,-6.608861 2.778466,-6.368747 3.498809,-6.094331 4.161982,-5.762744 4.825155,-5.442592 5.351119,-4.985231 5.911387,-4.596474 6.345878,-4.081944 6.757504,-3.567413 7.08909,-2.984278 7.386375,-2.401144 7.569318,-1.73797 7.752263,-1.074798 7.798001,-0.365888 6.39161,0.377322 6.49452,1.131968 6.59743,1.852311 6.59743,2.538351 6.50595,3.167223 6.32301,3.738923 6.0829,4.287756 5.73988,4.756551 5.32825,5.191043 4.80229,5.511196 4.25345,5.842782 3.60171,6.060029 2.88138,6.208671 2.12672,6.311577 1.30348,6.368747 0.4688,6.620295 v 43.334925 h 13.33206 V 87.54356 l -0.56027,-7.958075 -1.6465,-8.026679 -2.61839,-7.797999 -3.48737,-7.500715 -4.26489,-7.169128 -4.93949,-6.791806 -5.56837,-6.391615 -6.0829,-5.92282 -6.55169,-5.431158 -6.94045,-4.893759 -7.27203,-4.310624 -7.51215,-3.647451 -7.70653,-2.9614098 -7.84373,-2.1953311 -7.90091,-1.383516 -7.84373,-0.4687946 -9.11291,0.4230586 -8.929967,1.2348737 -8.735588,2.0238209 -8.472606,2.7441643 -8.152454,3.441638 -7.763697,4.093378 -7.340638,4.722248 -6.826108,5.29395 -6.311577,5.888518 -5.63697,6.368747 -4.973797,6.883278 -4.207718,7.329204 -3.384469,7.752263 -2.469748,8.14102 -1.4749878,8.449738 -0.4116246,8.461172 v 43.403529 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</svg>
out put :
Related
I am trying to get the following image to look nice.
The issue is specifically right here:
Basically I'd like to hide the vertical strokes wherever they overlap with another part of the <path/>
I've made a simplified snippet below for people to play with.
path {
transform: translate(50px, 50px);
stroke-width: 1;
stroke: black;
opacity: .5;
box-sizing: inherit;
stroke-linecap: round;
stroke-linejoin: miter;
}
<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="green" d="
M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 94,0
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z"></path>
</svg>
Thanks!
You can fake it with stroke-dasharray. If these figures are auto-generated, it will take a little math to calculate where the gaps need to go, but if everything is made with straight lines that shouldn't be too difficult.
<svg height="150px" width="400px" viewBox="-50-50 250 100">
<path stroke-width="1" stroke="black" fill="green"
d="M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 94,0
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z"
stroke-dasharray="172 16 338 16 9999" />
</svg>
Alternatively, you can split the shape into more than one path. And give them a non-transparent fill.
path {
transform: translate(50px, 50px);
stroke-width: 1;
stroke: black;
box-sizing: inherit;
stroke-linecap: round;
stroke-linejoin: miter;
}
<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="#80c080" d="
M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z
"/>
<path stroke-width="1" stroke="black" fill="#80c080" d="
M 94,0.5
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0.5
"/>
</svg>
I added an SVG image to the background of my page with CSS however I am trying to change the opacity with no luck. I tried adding an image tag but I would prefer adding the image via the background-image property. Is it even possible to change the opacity?
The goal is to have a Bootstrap carousel with the Harley Davidson logo (in opacity) behind it.
Please see my CSS code below.
Thank you in advance for your help.
#page2 {
background-image: url(h-d-logo-shield.svg);
background-repeat: no-repeat;
background-size: 900px;
background-position: center;
position: absolute;
display: flex;
background-color: #fff;
height: 100vh;
width: 100%;
}
.carousel {
width: 800px;
height: 500px;
margin: auto;
}
Yes Possible. You need to add background of it's before element.
like this.
#page2 {
position: relative;
display: flex;
background-color: #fff;
height: 100vh;
width: 100%;
}
#page2::before {
content: "";
background-image: url(h-d-logo-shield.svg);
background-repeat: no-repeat;
background-size: 900px;
background-position: center;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
}
You can also set .svg-bg:opacity:0.5 in your css, or, open the svg directly on a text editor and change the opacity in the svg code, just like this:
<div style="width:100px;">
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:0.7;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:0.7;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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:svgfill-="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:0.5;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:0.3;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<svg style="opacity:0.5" 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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" x="0" y="0" viewBox="0 0 580 580">
<path style="fill:#007aff;stroke:#000;stroke-width:12px;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
Notice that there is opacity, which works exactly as the css opacity. It takes values from 0 (transparent) to 1 (full opacity) and it applies to the whole path, or any other element.
There are also fill-opacity and stroke-opacity which applies to change separately the opacity of fill or stroke.
Also notice that in the last svg I removed all opacity modifiers from the path element and add a style="opacity:0.5" to affect the whole svg.
You can also affect svg opacity from the css file by setting there fill-opacity, stroke-opacity and opacity but to do that you should remove any inline modifier within the svg because the inline modifiers take preference just like the inline css does.
Something that will perfectly work inside the svg code or through css is this approach using rgba just like in css. Use it like this fill:rgba(255, 255, 255, 1) which make it possible write a shorter code as you don't have to use fill-opacity, the same to stroke:rgba(0, 0, 0, 1) which substitute the stroke-opacity. This works fine for must modern browsers.
I would like to extract 2 lists of numeric numbers contained in the comments of my .xml (svg) file:
The second list has a variable position in the xml file (here: r1[[2]][[6]]) so I would like to find some index for the comment text:
Here is my current result, OK but index found by hand.
r1[[2]][[2]]
r1[[2]][[6]]
This code is working but I needed to find r1[[1]][[6]] index 6 by hand.
library(XML)
filepath1 <- paste("MyPath\\", sep="")
filename.cbv <- paste(filepath1,"CBV_Simpler.svg",sep="")
xml.cbv <- xmlTreeParse(filename.cbv,asText = FALSE)
r1 <- xmlRoot(xml.cbv) ##get the top node of the document
xmlSize(r1) # 2 nodes only, our data are under node 2
r1[[2]][[2]]
r1[[2]][[6]]
leftHemishpval1 <- xmlValue(r1[[2]][[2]])
righttHemishpval1 <- xmlValue(r1[[2]][[6]])
My SVG example file is here:
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1070"
height="1200"
zoomAndPan="magnify">
<text x="520" y="20" text-anchor="middle" font-size="18" font-family="Arial">Test Image</text>
<g transform="translate(20, 50) scale(1, 1)" font-family="Arial">
<g transform="translate(0, 250) scale(1, -1)">
<polygon points="0,0 1000,0 1000,200 0,200" style="stroke-width:1;stroke:#000000;fill:#ffffff" />
</g>
<!--
Left Hemisphere
0.025, 0
0.0753676, 0
0.125735, 0
0.176103, 0
0.226471, 0
0.276838, 883
0.327206, 1833
0.377574, 4319
0.427941, 4905
0.478309, 7499
0.528676, 10246
0.579044, 18289
0.629412, 21230
0.679779, 20371
0.730147, 27955
-->
<g transform="translate(0, 250) scale(1, -1)">
<path d="M 0,0 L 0,0 L 7.35294,0 L 14.7059,0 L 22.0588,0 L 29.4118,0 L 36.7647,3.01731 L 44.1176,6.26356 L 51.4706,14.7585 L 58.8235,16.7609 L 66.1765,25.6249 L 73.5294,35.0117 L 80.8824,62.4955 L 88.2353,72.5452 L 95.5882,69.6099 L 102.941,95.5253 L 110.294,133.366 L 117.647,126.888 L 125,103.197 L 132.353,127.034 L 139.706,122.104 L 147.059,135.892 L 154.412,88.7526 L 161.765,112.184 L 169.118,140.166 L 176.471,99.0039 L 183.824,150.537 L 191.176,101.854 L 198.529,127.971 L 205.882,159.019 L 213.235,108.667 L 220.588,170.521 L 227.941,149.529 L 235.294,123.204 L 242.647,190.203 L 250,130.824 L 257.353,164.756 L 264.706,199.484 L 272.059,131.73 L 279.412,200 L 286.765,134.648 L 294.118,165.077 L 301.471,196.497 L 308.824,160.283 L 316.176,125.548 L 323.529,150.923 L 330.882,146.403 L 338.235,168.73 L 345.588,136.373 L 352.941,105.305 L 360.294,126.888 L 367.647,122.674 L 375,141.082 L 382.353,113.076 L 389.706,86.798 L 397.059,102.961 L 404.412,97.0117 L 411.765,107.417 L 419.118,84.8161 L 426.471,64.1938 L 433.824,75.624 L 441.176,72.2753 L 448.529,80.9616 L 455.882,63.3532 L 463.235,59.0306 L 470.588,44.5249 L 477.941,51.7248 L 485.294,47.1834 L 492.647,51.5744 L 500,39.2455 L 507.353,28.8609 L 514.706,32.9888 L 522.059,30.4943 L 529.412,32.9409 L 536.765,23.9334 L 544.118,18.6437 L 551.471,21.808 L 558.823,19.1119 L 566.176,22.0472 L 573.529,16.7575 L 580.882,12.4007 L 588.235,17.4853 L 595.588,11.0851 L 602.941,12.3768 L 610.294,13.4156 L 617.647,8.2079 L 625,10.5281 L 632.353,5.6929 L 639.706,6.49934 L 647.059,6.64628 L 654.412,3.70756 L 661.765,4.7737 L 669.118,2.8157 L 676.471,2.95922 L 683.824,3.02072 L 691.176,1.66413 L 698.529,2.16645 L 705.882,1.24383 L 713.235,1.17549 L 720.588,0.994379 L 727.941,0.611663 L 735.294,0.587743 L 742.647,0.399802 L 750,0.454476 L 757.353,0.351962 L 764.706,0.232363 L 772.059,0.375882 L 779.412,0.174273 L 786.765,0.17769 L 794.118,0.256283 L 801.471,0.126433 L 808.823,0.12985 L 816.176,0.0888448 L 823.529,0.109347 L 830.882,0.0854277 L 838.235,0.061508 L 845.588,0.061508 L 852.941,0.0341711 L 860.294,0.030754 L 867.647,0.0239198 L 875,0.00683422 L 882.353,0.0375882 L 889.706,0.0205027 L 897.059,0.0136684 L 904.412,0.0136684 L 911.765,0 L 919.118,0 L 926.471,0 L 933.823,0 L 941.176,0 L 948.529,0 L 955.882,0 L 963.235,0 L 970.588,0 L 977.941,0 L 985.294,0 L 992.647,0 L 1000,0 L 1000,0 " style="stroke-width:4;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 37.8805,100 L 37.8805,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 161.33,100 L 161.33,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 284.781,100 L 284.781,205" style="stroke-width:3;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 408.23,100 L 408.23,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 531.681,100 L 531.681,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 655.131,100 L 655.131,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 778.581,100 L 778.581,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 902.031,100 L 902.031,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 277.372,100 L 277.372,205" style="stroke-width:3;stroke:#000000;fill:#000000;fill-opacity:0.4" />
<path d="M 100,-20 L 100,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 300,-20 L 300,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 500,-20 L 500,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 600,-20 L 600,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 900,-20 L 900,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
</g>
<text x="500" y="20" text-anchor="middle" font-size="14">Left (median = 1.234, μ = 1.2345, σ = +/-0.1234)</text>
<text x="1000" y="290" text-anchor="middle" font-size="12">1.2345</text>
<!--
Right Hemisphere
0.025, 0
0.0753676, 50
0.125735, 2781
0.176103, 8161
0.226471, 9881
0.276838, 20905
0.327206, 18107
0.377574, 31681
0.427941, 22355
0.478309, 29350
0.528676, 29104
0.579044, 35388
0.629412, 31030
0.679779, 26076
0.730147, 36480
-->
<g transform="translate(0, 250) scale(1, -1)">
<path d="M 0,0 L 0,0 L 7.35294,0.170855 L 14.7059,9.50298 L 22.0588,27.887 L 29.4118,33.7645 L 36.7647,71.4347 L 44.1176,61.8736 L 51.4706,108.257 L 58.8235,76.3895 L 66.1765,100.292 L 73.5294,99.4516 L 80.8824,120.925 L 88.2353,106.033 L 95.5882,89.1045 L 102.941,124.656 L 110.294,163.686 L 117.647,144.937 L 125,113.069 L 132.353,132.813 L 139.706,132.864 L 147.059,159.948 L 154.412,103.186 L 161.765,128.805 L 169.118,151.043 L 176.471,97.8626 L 183.824,143.932 L 191.176,92.7062 L 198.529,114.682 L 205.882,137.669 L 213.235,93.9773 L 220.588,145.453 L 227.941,123.303 L 235.294,98.5734 L 242.647,150.377 L 250,100.586 L 257.353,128.111 L 264.706,155.222 L 272.059,105.397 L 279.412,157.993 L 286.765,105.165 L 294.118,128.473 L 301.471,150.363 L 308.824,123.057 L 316.176,95.0913 L 323.529,117.788 L 330.882,116.503 L 338.235,135.499 L 345.588,110.017 L 352.941,84.7853 L 360.294,104.833 L 367.647,100.497 L 375,115.215 L 382.353,94.3088 L 389.706,73.3414 L 397.059,89.2651 L 404.412,85.0484 L 411.765,98.2829 L 419.118,77.7597 L 426.471,58.7059 L 433.824,71.0109 L 441.176,65.4513 L 448.529,75.8427 L 455.882,58.6786 L 463.235,54.8583 L 470.588,41.5521 L 477.941,49.4114 L 485.294,45.0614 L 492.647,50.7612 L 500,39.8572 L 507.353,29.7289 L 514.706,35.0049 L 522.059,32.8111 L 529.412,36.3102 L 536.765,27.5624 L 544.118,20.6735 L 551.471,24.0257 L 558.823,22.1395 L 566.176,24.5724 L 573.529,18.8795 L 580.882,14.0785 L 588.235,19.8363 L 595.588,12.2606 L 602.941,14.427 L 610.294,15.9032 L 617.647,9.56791 L 625,13.4702 L 632.353,8.33091 L 639.706,9.39705 L 647.059,10.2308 L 654.412,6.3114 L 661.765,8.89132 L 669.118,5.31019 L 676.471,6.46859 L 683.824,7.20668 L 691.176,4.24405 L 698.529,6.19522 L 705.882,3.84083 L 713.235,4.23722 L 720.588,4.74978 L 727.941,2.87721 L 735.294,3.834 L 742.647,2.24504 L 750,2.26554 L 757.353,2.26213 L 764.706,1.14131 L 772.059,1.66413 L 779.412,0.796187 L 786.765,0.844026 L 794.118,0.796187 L 801.471,0.444224 L 808.823,0.56724 L 816.176,0.30754 L 823.529,0.41347 L 830.882,0.392968 L 838.235,0.235781 L 845.588,0.242615 L 852.941,0.174273 L 860.294,0.181107 L 867.647,0.17769 L 875,0.119599 L 882.353,0.0990962 L 889.706,0.0273369 L 897.059,0.0341711 L 904.412,0.0341711 L 911.765,0.0239198 L 919.118,0.0410053 L 926.471,0.0136684 L 933.823,0.0102513 L 941.176,0.0102513 L 948.529,0.0136684 L 955.882,0.00683422 L 963.235,0 L 970.588,0 L 977.941,0 L 985.294,0 L 992.647,0 L 1000,0 L 1000,0 " style="stroke-width:4;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 119.889,-5 L 119.889,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 265.02,-5 L 265.02,100" style="stroke-width:3;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 410.151,-5 L 410.151,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 555.282,-5 L 555.282,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 700.413,-5 L 700.413,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 845.544,-5 L 845.544,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 990.674,-5 L 990.674,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 255.474,-5 L 255.474,100" style="stroke-width:3;stroke:#000000;fill:#000000;fill-opacity:0.4" />
<path d="M 100,-20 L 100,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 200,-20 L 200,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 300,-20 L 300,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 400,-20 L 400,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 500,-20 L 500,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 600,-20 L 600,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 700,-20 L 700,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 800,-20 L 800,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 900,-20 L 900,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
</g>
<text x="1000" y="290" text-anchor="middle" font-size="12">1.2345</text>
</g>
</svg>
Using the xml2 library, read the file
xml <- read_xml(filename.cbv)
the 'xpath' (this section of the specification provides a succinct overview of the XPath syntax, useful for many basic processing steps) to comment nodes can be specified in various ways; for your document above where you are interested in all comments, a path is //comment() and the nodes can be found with
comments <- xml_find_all(xml, "//comment()")
These can be coerced into a character vector with
value <- as.character(comments)
though one still needs to parse these for use in R, e.g., with
read.csv(textConnection(value[[1]]), skip=2, header = FALSE, nrow = 15)
or maybe a little more robustly (but still depending on knowledge of the internal structure of the comment) by trimming the first two (tail(txt, -2)) and the last (head(., -1)) lines from the comment before parsing
txt <- textConnection(value[[1]])
read.csv(text = head(tail(txt, -2), -1), header = FALSE)
I think the parsing step with the XML package is
xml <- xmlParse(filename.cbv)
value <- xpathApply(xml, "//comment()", as, "character")
I want to capture vector image like this.
Vector image There are so many operators "m" and "l" to draw this vector image. GeneralPath object will load these "m" "l" oprs in pdfbox. I wonder if there is some method that can tell me that this is a vector.
This file content stream:
91.92 141.48 m
91.92 272.76 l
S
88.68 141.48 m
91.92 141.48 l
88.68 160.2 m
91.92 160.2 l
88.68 178.92 m
91.92 178.92 l
88.68 197.76 m
91.92 197.76 l
88.68 216.48 m
91.92 216.48 l
88.68 235.32 m
91.92 235.32 l
88.68 254.04 m
91.92 254.04 l
88.68 272.76 m
91.92 272.76 l
S
91.92 197.76 m
388.8 197.76 l
S
I am trying to animate both the stroke and the fill of a path element (some text). The animation starts with no visible stroke or fill. When the animation finishes I would like the element to be filled in black.
Starting state is an empty circle.
The current end state of the animation is:
The desired end state of the animation is:
I have been able to animate the stroke adequately but not the fill. Apparently the fill animation works in chrome 43, but in chrome 45 and firefox v35 it does not. Find the relevant css and html in the below snippet or on codepen.
#text {
stroke: black !important;
stroke-width: 2;
fill: transparent !important;
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: dash 3s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
/* does not work don't know why */
fill: black !important;
}
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!-- The SVG HTML created with Inkscape (http://www.inkscape.org/) -->
<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" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:export-ydpi="36.340767" inkscape:export-xdpi="36.340767" inkscape:export-filename="/home/da/code/fb-agg/public/assets/images/fube-logo.png" sodipodi:docname="fube-logo.plain.svg" inkscape:version="0.48.4 r9939"
version="1.1" id="svg2" height="400" width="400">
<defs id="defs4" />
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="2" inkscape:cx="216.69893" inkscape:cy="212.10363" inkscape:document-units="px" inkscape:current-layer="svg2"
showgrid="false" inkscape:window-width="1920" inkscape:window-height="1063" inkscape:window-x="-1" inkscape:window-y="-15" inkscape:window-maximized="1" />
<metadata id="metadata7">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-652.36218)">
<path sodipodi:type="arc" style="fill:#ff0000;fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:3.68879914;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="circle" sodipodi:cx="181.06984"
sodipodi:cy="177.76643" sodipodi:rx="145.20943" sodipodi:ry="134.3503" d="m 326.27927,177.76643 a 145.20943,134.3503 0 1 1 -290.418857,0 145.20943,134.3503 0 1 1 290.418857,0 z" transform="matrix(1.3037878,0,0,1.409169,-36.076648,601.85923)" inkscape:export-filename="/home/da/code/fb-agg/public/assets/images/fube-logo.png"
inkscape:export-xdpi="36.340767" inkscape:export-ydpi="36.340767" />
<path sodipodi:type="inkscape:offset" inkscape:radius="0" style="font-size:129.69909668px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Clip;-inkscape-font-specification:Clip"
id="text" inkscape:original="M 91.125 804.625 C 87.959907 804.6251 84.913995 805.17722 81.96875 806.3125 C 72.253748 810.73244 67.406244 819.56231 67.40625 832.78125 L 67.40625 891.78125 C 68.593141 896.03891 71.026163 898.15625 74.71875 898.15625 L 76.15625 898.15625 C 76.683745 898.15625 77.203932 898.0904 77.6875 897.96875 C 81.68777 896.79283 83.687478 894.33357 83.6875 890.5625 L 83.6875 844.34375 C 83.687478 842.55965 85.433446 841.50265 88.90625 841.21875 C 91.411896 841.21881 94.080116 841.62657 96.9375 842.4375 C 98.563953 842.19425 99.374962 841.48848 99.375 840.3125 L 99.375 840 C 99.374962 839.43236 99.282258 839.1563 99.0625 839.15625 C 99.062462 838.14258 95.874054 837.3929 89.5 836.90625 C 88.181196 836.90631 87.048118 837.01606 86.125 837.21875 C 81.377383 838.39473 78.999983 840.91984 79 844.8125 L 79 890.75 C 78.999983 892.73691 77.811282 893.8285 75.4375 894.03125 C 73.195566 893.74741 72.09374 892.75626 72.09375 891.09375 L 72.09375 832.59375 C 72.09374 829.26879 72.582676 825.81839 73.59375 822.25 C 76.539003 813.24818 82.717702 808.75009 92.125 808.75 C 94.938357 808.75009 98.541543 809.32416 102.9375 810.5 L 103.875 810.5 C 104.88601 810.01349 105.37496 809.43942 105.375 808.75 L 105.375 808.09375 C 105.37496 806.35022 101.57366 805.19278 93.96875 804.625 L 91.125 804.625 z M 193.34375 804.625 C 192.33268 805.15223 191.81249 805.79216 191.8125 806.5625 L 191.8125 835.8125 C 191.81249 849.96418 191.75687 868.9916 191.625 892.875 C 191.75692 893.07775 191.81249 893.30992 191.8125 893.59375 C 193.21918 897.12153 195.63366 898.90625 199.0625 898.90625 L 201.375 898.53125 C 204.8038 897.23368 206.53123 895.28264 206.53125 892.6875 C 206.00373 878.94137 205.74998 871.08067 205.75 869.09375 L 205.75 864.53125 C 205.74998 854.11018 207.4647 846.95527 210.9375 843.0625 C 215.55319 838.60216 221.28003 836.37505 228.09375 836.375 L 230.1875 836.375 C 235.06693 836.37505 239.74756 837.89637 244.1875 840.9375 C 251.17695 846.93882 254.65618 854.5015 254.65625 863.625 L 254.65625 864.53125 C 254.65618 864.77459 254.74305 865.00674 254.875 865.25 C 254.74308 865.45278 254.65618 865.69423 254.65625 865.9375 L 254.65625 866.96875 C 254.65618 874.51091 251.9011 881.49021 246.40625 887.9375 C 240.86734 893.1278 234.97362 895.71875 228.6875 895.71875 L 227.90625 895.71875 C 227.64246 895.71875 227.37601 895.76265 227.15625 895.84375 C 226.93641 895.7626 226.68267 895.71875 226.375 895.71875 L 225.65625 895.71875 C 222.53511 895.71875 219.29108 895.01297 215.90625 893.59375 C 213.26867 892.05289 211.77644 891.28126 211.46875 891.28125 L 210.9375 891.28125 C 209.92641 891.28126 209.23937 891.95243 208.84375 893.25 C 208.84373 893.97989 209.13455 894.61982 209.75 895.1875 C 214.76132 898.47198 219.98653 900.09375 225.4375 900.09375 L 228.6875 900.09375 C 234.35819 900.09375 240.33878 898.0642 246.625 893.96875 C 255.15303 886.22388 259.40618 877.29355 259.40625 867.15625 L 259.40625 863.96875 C 259.40618 859.54893 258.45268 854.81869 256.5625 849.75 C 250.71586 837.86917 241.81332 831.93757 229.8125 831.9375 L 228.28125 831.9375 C 222.08296 831.93757 216.53569 833.49347 211.65625 836.65625 C 204.53483 840.38682 200.99999 849.69033 201 864.53125 L 201 868.71875 C 200.99999 870.74623 201.25372 878.62887 201.78125 892.375 C 201.78123 893.59147 200.95169 894.2753 199.28125 894.4375 C 197.61079 894.4375 196.60167 893.52151 196.25 891.65625 C 196.24999 891.53462 196.287 891.33704 196.375 891.09375 C 196.50692 860.76304 196.56249 837.24684 196.5625 820.5 L 196.5625 807.125 C 196.38665 805.46258 195.6996 804.6251 194.46875 804.625 L 193.34375 804.625 z M 302.875 832.34375 C 295.53379 832.34381 288.9403 834.87822 283.09375 839.90625 C 276.10422 846.5969 272.59374 854.7117 272.59375 864.28125 L 272.59375 867.3125 C 272.59374 875.70619 275.83777 883.01475 282.34375 889.21875 C 289.50908 895.01727 297.16147 897.90625 305.25 897.90625 L 308.34375 897.90625 C 310.01416 897.90625 311.49367 897.82774 312.8125 897.625 C 323.71433 895.59754 329.18744 893.5148 329.1875 891.40625 L 329.1875 891.21875 C 329.18744 890.20503 328.45059 889.54315 327 889.21875 L 326.8125 889.21875 C 319.55918 892.34103 312.84175 893.90625 306.6875 893.90625 C 304.00595 893.90625 300.61942 893.38873 296.53125 892.375 C 283.47534 887.75241 276.93749 878.80013 276.9375 865.5 C 276.93749 861.89116 277.67434 857.75693 279.125 853.09375 C 284.26822 842.06444 292.2485 836.56256 303.0625 836.5625 L 303.59375 836.5625 C 303.85747 836.56256 304.09266 836.4967 304.3125 836.375 C 304.53226 836.49667 304.76746 836.56256 305.03125 836.5625 L 305.96875 836.5625 C 308.47438 836.56256 311.17969 837.04883 314.125 838.0625 C 323.40035 842.07691 328.06245 849.7713 328.0625 861.125 L 328.0625 863.125 C 328.06245 864.01712 327.52371 864.46879 326.46875 864.46875 L 289.8125 864.46875 C 288.71349 864.46879 288.11915 863.90736 288.03125 862.8125 C 288.03123 861.67717 288.68121 861.12504 290 861.125 L 319.34375 861.125 C 320.79435 860.84119 321.53119 860.21391 321.53125 859.28125 L 321.53125 858.8125 C 321.22348 857.55552 320.57351 856.93754 319.5625 856.9375 L 289.8125 856.9375 C 286.20782 856.93754 284.08416 858.87928 283.46875 862.8125 C 283.46873 866.21867 285.64802 868.16969 290 868.65625 L 326.46875 868.65625 C 330.5569 867.96694 332.59369 866.30127 332.59375 863.625 L 332.59375 861.3125 C 332.59369 854.94633 331.20687 849.4571 328.4375 844.875 C 323.07443 836.52194 315.54016 832.34381 305.78125 832.34375 L 302.875 832.34375 z M 120.40625 832.65625 C 119.17538 832.89961 118.56249 833.41713 118.5625 834.1875 C 118.56249 842.41902 118.61811 856.04501 118.75 875.0625 C 118.74999 876.80613 119.19602 879.17758 120.03125 882.21875 C 124.11945 892.35603 131.54246 897.4375 142.3125 897.4375 L 144.6875 897.4375 C 148.24815 897.4375 151.8328 896.41175 155.4375 894.34375 C 162.6028 888.86963 166.18745 881.04354 166.1875 870.90625 L 166.1875 841.0625 C 166.18745 838.18357 167.41322 836.71881 169.875 836.71875 L 169.875 836.90625 C 172.24874 836.90631 173.43743 838.0418 173.4375 840.3125 C 173.65723 869.42679 173.74994 886.07346 173.75 890.25 L 173.75 891.78125 C 173.74994 894.74135 174.50533 896.21875 176 896.21875 L 176.40625 896.21875 C 177.06558 896.21875 177.73408 895.83294 178.4375 895.0625 C 178.43743 887.80422 178.29494 869.68014 178.03125 840.6875 C 177.37179 835.33507 174.92023 832.65632 170.65625 832.65625 L 168.9375 832.65625 L 167.09375 832.84375 C 163.40112 834.14139 161.56245 837.03036 161.5625 841.53125 L 161.5625 871.28125 C 161.56245 873.95752 161.00518 877.25426 159.90625 881.1875 C 156.60926 889.17568 151.65634 893.1875 145.0625 893.1875 L 143.75 893.1875 L 143.4375 893.34375 C 143.43747 893.22208 143.35058 893.1875 143.21875 893.1875 L 142.09375 893.1875 C 137.87364 893.1875 133.99816 891.98615 130.4375 889.59375 C 125.73384 885.37665 123.37499 880.53665 123.375 875.0625 C 123.2431 857.86971 123.18747 846.27326 123.1875 840.3125 C 123.18747 839.37992 123.10062 837.24063 122.96875 833.875 C 122.26539 833.14518 121.795 832.73745 121.53125 832.65625 L 120.40625 832.65625 z "
d="m 91.125,804.625 c -3.165093,10e-5 -6.211005,0.55222 -9.15625,1.6875 -9.715002,4.41994 -14.562506,13.24981 -14.5625,26.46875 l 0,59 c 1.186891,4.25766 3.619913,6.375 7.3125,6.375 l 1.4375,0 c 0.527495,0 1.047682,-0.0658 1.53125,-0.1875 4.00027,-1.17592 5.999978,-3.63518 6,-7.40625 l 0,-46.21875 c -2.2e-5,-1.7841 1.745946,-2.8411 5.21875,-3.125 2.505646,6e-5 5.173866,0.40782 8.03125,1.21875 1.626453,-0.24325 2.437462,-0.94902 2.4375,-2.125 l 0,-0.3125 c -3.8e-5,-0.56764 -0.09274,-0.8437 -0.3125,-0.84375 -3.8e-5,-1.01367 -3.188446,-1.76335 -9.5625,-2.25 -1.318804,6e-5 -2.451882,0.10981 -3.375,0.3125 -4.747617,1.17598 -7.125017,3.70109 -7.125,7.59375 l 0,45.9375 c -1.7e-5,1.98691 -1.188718,3.0785 -3.5625,3.28125 -2.241934,-0.28384 -3.34376,-1.27499 -3.34375,-2.9375 l 0,-58.5 c -1e-5,-3.32496 0.488926,-6.77536 1.5,-10.34375 2.945253,-9.00182 9.123952,-13.49991 18.53125,-13.5 2.813357,9e-5 6.416543,0.57416 10.8125,1.75 l 0.9375,0 c 1.01101,-0.48651 1.49996,-1.06058 1.5,-1.75 l 0,-0.65625 c -4e-5,-1.74353 -3.80134,-2.90097 -11.40625,-3.46875 l -2.84375,0 z m 102.21875,0 c -1.01107,0.52723 -1.53126,1.16716 -1.53125,1.9375 l 0,29.25 c -1e-5,14.15168 -0.0556,33.1791 -0.1875,57.0625 0.13192,0.20275 0.18749,0.43492 0.1875,0.71875 1.40668,3.52778 3.82116,5.3125 7.25,5.3125 l 2.3125,-0.375 c 3.4288,-1.29757 5.15623,-3.24861 5.15625,-5.84375 -0.52752,-13.74613 -0.78127,-21.60683 -0.78125,-23.59375 l 0,-4.5625 c -2e-5,-10.42107 1.7147,-17.57598 5.1875,-21.46875 4.61569,-4.46034 10.34253,-6.68745 17.15625,-6.6875 l 2.09375,0 c 4.87943,5e-5 9.56006,1.52137 14,4.5625 6.98945,6.00132 10.46868,13.564 10.46875,22.6875 l 0,0.90625 c -7e-5,0.24334 0.0868,0.47549 0.21875,0.71875 -0.13192,0.20278 -0.21882,0.44423 -0.21875,0.6875 l 0,1.03125 c -7e-5,7.54216 -2.75515,14.52146 -8.25,20.96875 -5.53891,5.1903 -11.43263,7.78125 -17.71875,7.78125 l -0.78125,0 c -0.26379,0 -0.53024,0.0439 -0.75,0.125 -0.21984,-0.0811 -0.47358,-0.125 -0.78125,-0.125 l -0.71875,0 c -3.12114,0 -6.36517,-0.70578 -9.75,-2.125 -2.63758,-1.54086 -4.12981,-2.31249 -4.4375,-2.3125 l -0.53125,0 c -1.01109,10e-6 -1.69813,0.67118 -2.09375,1.96875 -2e-5,0.72989 0.2908,1.36982 0.90625,1.9375 5.01132,3.28448 10.23653,4.90625 15.6875,4.90625 l 3.25,0 c 5.67069,0 11.65128,-2.02955 17.9375,-6.125 8.52803,-7.74487 12.78118,-16.6752 12.78125,-26.8125 l 0,-3.1875 c -7e-5,-4.41982 -0.95357,-9.15006 -2.84375,-14.21875 -5.84664,-11.88083 -14.74918,-17.81243 -26.75,-17.8125 l -1.53125,0 c -6.19829,7e-5 -11.74556,1.55597 -16.625,4.71875 -7.12142,3.73057 -10.65626,13.03408 -10.65625,27.875 l 0,4.1875 c -1e-5,2.02748 0.25372,9.91012 0.78125,23.65625 -2e-5,1.21647 -0.82956,1.9003 -2.5,2.0625 -1.67046,0 -2.67958,-0.91599 -3.03125,-2.78125 -1e-5,-0.12163 0.037,-0.31921 0.125,-0.5625 0.13192,-30.33071 0.18749,-53.84691 0.1875,-70.59375 l 0,-13.375 c -0.17585,-1.66242 -0.8629,-2.4999 -2.09375,-2.5 l -1.125,0 z M 302.875,832.34375 c -7.34121,6e-5 -13.9347,2.53447 -19.78125,7.5625 -6.98953,6.69065 -10.50001,14.80545 -10.5,24.375 l 0,3.03125 c -10e-6,8.39369 3.24402,15.70225 9.75,21.90625 7.16533,5.79852 14.81772,8.6875 22.90625,8.6875 l 3.09375,0 c 1.67041,0 3.14992,-0.0785 4.46875,-0.28125 10.90183,-2.02746 16.37494,-4.1102 16.375,-6.21875 l 0,-0.1875 c -6e-5,-1.01372 -0.73691,-1.6756 -2.1875,-2 l -0.1875,0 c -7.25332,3.12228 -13.97075,4.6875 -20.125,4.6875 -2.68155,0 -6.06808,-0.51752 -10.15625,-1.53125 -13.05591,-4.62259 -19.59376,-13.57487 -19.59375,-26.875 -10e-6,-3.60884 0.73684,-7.74307 2.1875,-12.40625 5.14322,-11.02931 13.1235,-16.53119 23.9375,-16.53125 l 0.53125,0 c 0.26372,6e-5 0.49891,-0.0658 0.71875,-0.1875 0.21976,0.12167 0.45496,0.18756 0.71875,0.1875 l 0.9375,0 c 2.50563,6e-5 5.21094,0.48633 8.15625,1.5 9.27535,4.01441 13.93745,11.7088 13.9375,23.0625 l 0,2 c -5e-5,0.89212 -0.53879,1.34379 -1.59375,1.34375 l -36.65625,0 c -1.09901,4e-5 -1.69335,-0.56139 -1.78125,-1.65625 -2e-5,-1.13533 0.64996,-1.68746 1.96875,-1.6875 l 29.34375,0 c 1.4506,-0.28381 2.18744,-0.91109 2.1875,-1.84375 l 0,-0.46875 c -0.30777,-1.25698 -0.95774,-1.87496 -1.96875,-1.875 l -29.75,0 c -3.60468,4e-5 -5.72834,1.94178 -6.34375,5.875 -2e-5,3.40617 2.17927,5.35719 6.53125,5.84375 l 36.46875,0 c 4.08815,-0.68931 6.12494,-2.35498 6.125,-5.03125 l 0,-2.3125 c -6e-5,-6.36617 -1.38688,-11.8554 -4.15625,-16.4375 -5.36307,-8.35306 -12.89734,-12.53119 -22.65625,-12.53125 l -2.90625,0 z m -182.46875,0.3125 c -1.23087,0.24336 -1.84376,0.76088 -1.84375,1.53125 -1e-5,8.23152 0.0556,21.85751 0.1875,40.875 -1e-5,1.74363 0.44602,4.11508 1.28125,7.15625 4.0882,10.13728 11.51121,15.21875 22.28125,15.21875 l 2.375,0 c 3.56065,0 7.1453,-1.02575 10.75,-3.09375 7.1653,-5.47412 10.74995,-13.30021 10.75,-23.4375 l 0,-29.84375 c -5e-5,-2.87893 1.22572,-4.34369 3.6875,-4.34375 l 0,0.1875 c 2.37374,6e-5 3.56243,1.13555 3.5625,3.40625 0.21973,29.11429 0.31244,45.76096 0.3125,49.9375 l 0,1.53125 c -6e-5,2.9601 0.75533,4.4375 2.25,4.4375 l 0.40625,0 c 0.65933,0 1.32783,-0.38581 2.03125,-1.15625 -7e-5,-7.25828 -0.14256,-25.38236 -0.40625,-54.375 -0.65946,-5.35243 -3.11102,-8.03118 -7.375,-8.03125 l -1.71875,0 -1.84375,0.1875 c -3.69263,1.29764 -5.5313,4.18661 -5.53125,8.6875 l 0,29.75 c -5e-5,2.67627 -0.55732,5.97301 -1.65625,9.90625 -3.29699,7.98818 -8.24991,12 -14.84375,12 l -1.3125,0 -0.3125,0.15625 c -3e-5,-0.12167 -0.0869,-0.15625 -0.21875,-0.15625 l -1.125,0 c -4.22011,0 -8.09559,-1.20135 -11.65625,-3.59375 -4.70366,-4.2171 -7.06251,-9.0571 -7.0625,-14.53125 -0.1319,-17.19279 -0.18753,-28.78924 -0.1875,-34.75 -3e-5,-0.93258 -0.0869,-3.07187 -0.21875,-6.4375 -0.70336,-0.72982 -1.17375,-1.13755 -1.4375,-1.21875 l -1.125,0 z"
/>
</g>
</svg>
You can't use !important in keyframes (well you can but it has no effect). Presumably Chrome 43 had this bug but it's fixed by Chrome 45.
You can make it work by removing the !important from the keyframe and the original fill style and also removing the fill style from the path so you don't need the !important to force the override in the first place.
#text {
stroke: black !important;
stroke-width: 2;
fill: transparent;
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: dash 3s linear infinite;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
/* works, know why */
fill: black;
}
}
<svg height="400" width="400">
<g id="layer1" transform="translate(0,-652.36218)">
<path style="fill-opacity:0;fill-rule:evenodd;stroke:#000000;stroke-width:3.68879914;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" id="circle" d="m 326.27927,177.76643 a 145.20943,134.3503 0 1 1 -290.418857,0 145.20943,134.3503 0 1 1 290.418857,0 z" transform="matrix(1.3037878,0,0,1.409169,-36.076648,601.85923)" />
<path
id="text"
d="m 91.125,804.625 c -3.165093,10e-5 -6.211005,0.55222 -9.15625,1.6875 -9.715002,4.41994 -14.562506,13.24981 -14.5625,26.46875 l 0,59 c 1.186891,4.25766 3.619913,6.375 7.3125,6.375 l 1.4375,0 c 0.527495,0 1.047682,-0.0658 1.53125,-0.1875 4.00027,-1.17592 5.999978,-3.63518 6,-7.40625 l 0,-46.21875 c -2.2e-5,-1.7841 1.745946,-2.8411 5.21875,-3.125 2.505646,6e-5 5.173866,0.40782 8.03125,1.21875 1.626453,-0.24325 2.437462,-0.94902 2.4375,-2.125 l 0,-0.3125 c -3.8e-5,-0.56764 -0.09274,-0.8437 -0.3125,-0.84375 -3.8e-5,-1.01367 -3.188446,-1.76335 -9.5625,-2.25 -1.318804,6e-5 -2.451882,0.10981 -3.375,0.3125 -4.747617,1.17598 -7.125017,3.70109 -7.125,7.59375 l 0,45.9375 c -1.7e-5,1.98691 -1.188718,3.0785 -3.5625,3.28125 -2.241934,-0.28384 -3.34376,-1.27499 -3.34375,-2.9375 l 0,-58.5 c -1e-5,-3.32496 0.488926,-6.77536 1.5,-10.34375 2.945253,-9.00182 9.123952,-13.49991 18.53125,-13.5 2.813357,9e-5 6.416543,0.57416 10.8125,1.75 l 0.9375,0 c 1.01101,-0.48651 1.49996,-1.06058 1.5,-1.75 l 0,-0.65625 c -4e-5,-1.74353 -3.80134,-2.90097 -11.40625,-3.46875 l -2.84375,0 z m 102.21875,0 c -1.01107,0.52723 -1.53126,1.16716 -1.53125,1.9375 l 0,29.25 c -1e-5,14.15168 -0.0556,33.1791 -0.1875,57.0625 0.13192,0.20275 0.18749,0.43492 0.1875,0.71875 1.40668,3.52778 3.82116,5.3125 7.25,5.3125 l 2.3125,-0.375 c 3.4288,-1.29757 5.15623,-3.24861 5.15625,-5.84375 -0.52752,-13.74613 -0.78127,-21.60683 -0.78125,-23.59375 l 0,-4.5625 c -2e-5,-10.42107 1.7147,-17.57598 5.1875,-21.46875 4.61569,-4.46034 10.34253,-6.68745 17.15625,-6.6875 l 2.09375,0 c 4.87943,5e-5 9.56006,1.52137 14,4.5625 6.98945,6.00132 10.46868,13.564 10.46875,22.6875 l 0,0.90625 c -7e-5,0.24334 0.0868,0.47549 0.21875,0.71875 -0.13192,0.20278 -0.21882,0.44423 -0.21875,0.6875 l 0,1.03125 c -7e-5,7.54216 -2.75515,14.52146 -8.25,20.96875 -5.53891,5.1903 -11.43263,7.78125 -17.71875,7.78125 l -0.78125,0 c -0.26379,0 -0.53024,0.0439 -0.75,0.125 -0.21984,-0.0811 -0.47358,-0.125 -0.78125,-0.125 l -0.71875,0 c -3.12114,0 -6.36517,-0.70578 -9.75,-2.125 -2.63758,-1.54086 -4.12981,-2.31249 -4.4375,-2.3125 l -0.53125,0 c -1.01109,10e-6 -1.69813,0.67118 -2.09375,1.96875 -2e-5,0.72989 0.2908,1.36982 0.90625,1.9375 5.01132,3.28448 10.23653,4.90625 15.6875,4.90625 l 3.25,0 c 5.67069,0 11.65128,-2.02955 17.9375,-6.125 8.52803,-7.74487 12.78118,-16.6752 12.78125,-26.8125 l 0,-3.1875 c -7e-5,-4.41982 -0.95357,-9.15006 -2.84375,-14.21875 -5.84664,-11.88083 -14.74918,-17.81243 -26.75,-17.8125 l -1.53125,0 c -6.19829,7e-5 -11.74556,1.55597 -16.625,4.71875 -7.12142,3.73057 -10.65626,13.03408 -10.65625,27.875 l 0,4.1875 c -1e-5,2.02748 0.25372,9.91012 0.78125,23.65625 -2e-5,1.21647 -0.82956,1.9003 -2.5,2.0625 -1.67046,0 -2.67958,-0.91599 -3.03125,-2.78125 -1e-5,-0.12163 0.037,-0.31921 0.125,-0.5625 0.13192,-30.33071 0.18749,-53.84691 0.1875,-70.59375 l 0,-13.375 c -0.17585,-1.66242 -0.8629,-2.4999 -2.09375,-2.5 l -1.125,0 z M 302.875,832.34375 c -7.34121,6e-5 -13.9347,2.53447 -19.78125,7.5625 -6.98953,6.69065 -10.50001,14.80545 -10.5,24.375 l 0,3.03125 c -10e-6,8.39369 3.24402,15.70225 9.75,21.90625 7.16533,5.79852 14.81772,8.6875 22.90625,8.6875 l 3.09375,0 c 1.67041,0 3.14992,-0.0785 4.46875,-0.28125 10.90183,-2.02746 16.37494,-4.1102 16.375,-6.21875 l 0,-0.1875 c -6e-5,-1.01372 -0.73691,-1.6756 -2.1875,-2 l -0.1875,0 c -7.25332,3.12228 -13.97075,4.6875 -20.125,4.6875 -2.68155,0 -6.06808,-0.51752 -10.15625,-1.53125 -13.05591,-4.62259 -19.59376,-13.57487 -19.59375,-26.875 -10e-6,-3.60884 0.73684,-7.74307 2.1875,-12.40625 5.14322,-11.02931 13.1235,-16.53119 23.9375,-16.53125 l 0.53125,0 c 0.26372,6e-5 0.49891,-0.0658 0.71875,-0.1875 0.21976,0.12167 0.45496,0.18756 0.71875,0.1875 l 0.9375,0 c 2.50563,6e-5 5.21094,0.48633 8.15625,1.5 9.27535,4.01441 13.93745,11.7088 13.9375,23.0625 l 0,2 c -5e-5,0.89212 -0.53879,1.34379 -1.59375,1.34375 l -36.65625,0 c -1.09901,4e-5 -1.69335,-0.56139 -1.78125,-1.65625 -2e-5,-1.13533 0.64996,-1.68746 1.96875,-1.6875 l 29.34375,0 c 1.4506,-0.28381 2.18744,-0.91109 2.1875,-1.84375 l 0,-0.46875 c -0.30777,-1.25698 -0.95774,-1.87496 -1.96875,-1.875 l -29.75,0 c -3.60468,4e-5 -5.72834,1.94178 -6.34375,5.875 -2e-5,3.40617 2.17927,5.35719 6.53125,5.84375 l 36.46875,0 c 4.08815,-0.68931 6.12494,-2.35498 6.125,-5.03125 l 0,-2.3125 c -6e-5,-6.36617 -1.38688,-11.8554 -4.15625,-16.4375 -5.36307,-8.35306 -12.89734,-12.53119 -22.65625,-12.53125 l -2.90625,0 z m -182.46875,0.3125 c -1.23087,0.24336 -1.84376,0.76088 -1.84375,1.53125 -1e-5,8.23152 0.0556,21.85751 0.1875,40.875 -1e-5,1.74363 0.44602,4.11508 1.28125,7.15625 4.0882,10.13728 11.51121,15.21875 22.28125,15.21875 l 2.375,0 c 3.56065,0 7.1453,-1.02575 10.75,-3.09375 7.1653,-5.47412 10.74995,-13.30021 10.75,-23.4375 l 0,-29.84375 c -5e-5,-2.87893 1.22572,-4.34369 3.6875,-4.34375 l 0,0.1875 c 2.37374,6e-5 3.56243,1.13555 3.5625,3.40625 0.21973,29.11429 0.31244,45.76096 0.3125,49.9375 l 0,1.53125 c -6e-5,2.9601 0.75533,4.4375 2.25,4.4375 l 0.40625,0 c 0.65933,0 1.32783,-0.38581 2.03125,-1.15625 -7e-5,-7.25828 -0.14256,-25.38236 -0.40625,-54.375 -0.65946,-5.35243 -3.11102,-8.03118 -7.375,-8.03125 l -1.71875,0 -1.84375,0.1875 c -3.69263,1.29764 -5.5313,4.18661 -5.53125,8.6875 l 0,29.75 c -5e-5,2.67627 -0.55732,5.97301 -1.65625,9.90625 -3.29699,7.98818 -8.24991,12 -14.84375,12 l -1.3125,0 -0.3125,0.15625 c -3e-5,-0.12167 -0.0869,-0.15625 -0.21875,-0.15625 l -1.125,0 c -4.22011,0 -8.09559,-1.20135 -11.65625,-3.59375 -4.70366,-4.2171 -7.06251,-9.0571 -7.0625,-14.53125 -0.1319,-17.19279 -0.18753,-28.78924 -0.1875,-34.75 -3e-5,-0.93258 -0.0869,-3.07187 -0.21875,-6.4375 -0.70336,-0.72982 -1.17375,-1.13755 -1.4375,-1.21875 l -1.125,0 z"
/>
</g>
</svg>