SVG two paths in a single one axis - html
I have been new to SVG and trying to figure out how can I make different paths in an SVG in a single axis/single line.
Now what I want is that these words align to one single line like UNFO (Their Y-axis should be same)
Now this is the code to generate these words.
HTML Code
<svg style="background:black;" viewBox="0 0 1900 1400">
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,479.666q-14.21,29.444-20.508,53.613-5.128,19.484-5.127,29.3a11.726,11.726,0,0,0,2.344,7.324,9.709,9.709,0,0,0,7.764,3.955,4.257,4.257,0,0,0,4.248-2.636q0.73-1.758,1.025-9.522,0.879-21.677,19.776-66.5,19.04-45.263,52.441-95.361,6.591-9.812,6.592-13.476a6.047,6.047,0,0,0-1.9-4.395,6.408,6.408,0,0,0-4.834-2.2,10.365,10.365,0,0,0-7.177,2.783,92.63,92.63,0,0,0-8.35,8.643q-19.335,21.972-34.717,42.187-61.083,79.98-88.037,110.889-10.693,12.161-16.406,12.158a5.448,5.448,0,0,1-4.834-2.783,10.56,10.56,0,0,1-1.318-5.274q0-6.883,3.516-18.6a226.082,226.082,0,0,1,13.769-35.3q20.655-42.479,47.9-74.414,21.238-24.9,22.852-26.513,7.03-7.032,7.031-11.28a6.794,6.794,0,0,0-2.637-5.42,5.925,5.925,0,0,0-3.808-1.611q-6.009,0-21.24,17.578-36.771,42.334-59.619,87.012Q99.368,526.1,99.369,552.762a28.884,28.884,0,0,0,3.369,14.355q4.978,8.645,12.891,8.643,11.569,0,28.711-18.018a431.678,431.678,0,0,0,32.666-39.7q41.748-56.541,54.931-72.07-16.994,32.081-17.871,33.691h0Z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M508.564,250.1q4.248-6,4.248-9.228a6.46,6.46,0,0,0-2.05-4.688,5.189,5.189,0,0,0-3.662-1.757q-3.956,0-9.522,8.056-5.568,8.205-15.234,26.367Q464.326,302.4,464.326,310.3a7.142,7.142,0,0,0,2.051,5.274,5.323,5.323,0,0,0,4.1,1.758q4.982,0,9.375-7.764,17.137-32.372,37.06-45.117-14.942,24.026-14.941,43.8,0,10.254,3.955,17.431,4.1,7.615,10.107,7.617a5.993,5.993,0,0,0,4.541-2.05,4.615,4.615,0,0,0,1.758-3.37q0-1.9-2.051-5.273a29.441,29.441,0,0,1-4.394-15.381q0-24.9,27.978-57.568,5.126-6,5.127-10.4,0-6.3-5.713-6.3-10.4,0-41.015,29.883-1.758,1.757-3.663,3.515a156.849,156.849,0,0,1,9.961-16.26h0Z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M77.51,958.75q0,4.395,3.955,4.395a9.069,9.069,0,0,0,2.2-.293Q81.317,969,78.828,974.424q-9.668,21.828-11.719,27.1-16.4,43.515-16.406,65.19,0,10.11,3.662,15.97,4.542,7.02,11.865,7.03,9.668,0,18.9-9.52,8.641-8.79,17.871-25.79,21.385-39.84,21.387-75.728,0-13.916-4.981-23.438-3.663-6.735-12.451-10.839,20.506-13.329,35.156-13.33a11.828,11.828,0,0,1,5.274,1.025q7.323,4.1,9.814,4.1a6.938,6.938,0,0,0,5.713-2.783,6.416,6.416,0,0,0,1.611-4.248q0-4.539-4.541-8.056a17.77,17.77,0,0,0-11.132-3.37q-9.23,0-32.666,8.936,26.218-51.559,58.593-88.476,5.126-6.006,5.127-9.229a4.618,4.618,0,0,0-2.051-3.955,4.491,4.491,0,0,0-3.076-1.172q-4.689,0-11.279,6.592-9.524,9.377-24.023,29.883-21.39,30.323-43.8,78.662Q77.509,950.987,77.51,958.75h0Zm30.615,4.688q4.246,5.568,4.248,16.552,0,28.274-16.7,62.26-14.8,30.465-23.877,30.46c-1.854,0-3.465-.97-4.834-2.93a12.086,12.086,0,0,1-1.9-6.73q0-19.485,13.916-54.79,13.475-34.566,21.679-50.1,5.858,3.077,7.471,5.274h0Z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M824.762,560.3q-16.26,11.282-28.272,31.64Q783.6,613.912,783.6,632.662a20.468,20.468,0,0,0,2.05,9.521q3.956,7.911,12.452,7.91,18.309,0,37.939-32.373,18.018-29.882,18.017-49.365,0-14.646-12.011-14.648-7.767,0-17.285,6.592h0Zm0,53.613a45.37,45.37,0,0,1-5.713,9.082q-8.058,10.546-15.088,10.547a5.744,5.744,0,0,1-4.834-2.637,7.524,7.524,0,0,1-1.318-4.395q0-9.372,7.177-23.583a92.43,92.43,0,0,1,17.871-24.17q9.081-9.081,13.77-9.082a3.881,3.881,0,0,1,3.662,2.2,4.408,4.408,0,0,1,.732,2.344q0,9.084-13.183,23.877-4.69,5.272-4.688,6.445,0,1.614,3.662,4.541,0.145,0.147-2.05,4.834h0Z"/>
</svg>
Can anyone tell me how to align each path?
Your first move command in each path specifies the starting y position. Each path shows a different y position. All four paths should probably have their first y value be the same say 150; however, some of the commands that follow are using absolute positioning. Changing the Y value will distort your shapes. If you are using an editor see if you can change it to use relative values rather than absolute. You can see them in the paths. Where ever there is an uppercase letter it is a absolute position. If it's a lower case letter then it is a relative position. The first M command in each svg is probably fine but the remaining commands in your SVG should probably be relative. That way you could just change the y value in each to be the same. You could change the first svg paths first M command to read something like M214.066,250 the second path to read M508.564,250 and the last two to use 250 as the second parameter also.
I used Inkscape and imported your path using its XML editor. Once I created a new svg:path element and pasted your path data in I just moved it a little and Inkscape automatically converted the data to be relative. Then I just copied it back out and made adjustments to the first M command's x an y parameters for each svg path.
<svg style="background:black;" viewBox="0 0 1900 1400">
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,150 q -14.21,29.444 -20.508,53.613 -5.128,19.484 -5.127,29.3 a 11.726,11.726 0 0 0 2.344,7.324 9.709,9.709 0 0 0 7.764,3.955 4.257,4.257 0 0 0 4.248,-2.636 q 0.73,-1.758 1.025,-9.522 0.879,-21.677 19.776,-66.5 19.04,-45.263006 52.441,-95.361006 6.591,-9.812 6.592,-13.476 a 6.047,6.047 0 0 0 -1.9,-4.395 6.408,6.408 0 0 0 -4.834,-2.2 10.365,10.365 0 0 0 -7.177,2.783 92.63,92.63 0 0 0 -8.35,8.643 q -19.335,21.972 -34.717,42.187 -61.082996,79.980006 -88.036996,110.889006 -10.693,12.161 -16.406,12.158 a 5.448,5.448 0 0 1 -4.834,-2.783 10.56,10.56 0 0 1 -1.318,-5.274 q 0,-6.883 3.516,-18.6 a 226.082,226.082 0 0 1 13.769,-35.3 q 20.655,-42.479006 47.9,-74.414006 21.237996,-24.9 22.851996,-26.513 7.03,-7.032 7.031,-11.28 a 6.794,6.794 0 0 0 -2.637,-5.42 5.925,5.925 0 0 0 -3.808,-1.611 q -6.009,0 -21.239996,17.578 -36.771,42.334 -59.619,87.012006 -23.444001,46.277 -23.443001,72.939 a 28.884,28.884 0 0 0 3.369001,14.355 q 4.978,8.645 12.891,8.643 11.569,0 28.711,-18.018 a 431.678,431.678 0 0 0 32.666,-39.7 q 41.747996,-56.541 54.930996,-72.070006 -16.994,32.081006 -17.871,33.691006 v 0 z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M300,150 q 4.248,-6 4.248,-9.228 a 6.46,6.46 0 0 0 -2.05,-4.688 5.189,5.189 0 0 0 -3.662,-1.757 q -3.956,0 -9.522,8.056 -5.568,8.205 -15.234,26.367 -18.018,33.55 -18.018,41.45 a 7.142,7.142 0 0 0 2.051,5.274 5.323,5.323 0 0 0 4.1,1.758 q 4.982,0 9.375,-7.764 17.137,-32.372 37.06,-45.117 -14.942,24.026 -14.941,43.8 0,10.254 3.955,17.431 4.1,7.615 10.107,7.617 a 5.993,5.993 0 0 0 4.541,-2.05 4.615,4.615 0 0 0 1.758,-3.37 q 0,-1.9 -2.051,-5.273 a 29.441,29.441 0 0 1 -4.394,-15.381 q 0,-24.9 27.978,-57.568 5.126,-6 5.127,-10.4 0,-6.3 -5.713,-6.3 -10.4,0 -41.015,29.883 -1.758,1.757 -3.663,3.515 a 156.849,156.849 0 0 1 9.961,-16.26 v 0 z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M360,150 q 0,4.395 3.955,4.395 a 9.069,9.069 0 0 0 2.2,-0.293 q -2.348,6.148 -4.837,11.572 -9.668,21.828 -11.719,27.1 -16.4,43.515 -16.406,65.18998 0,10.11 3.662,15.97 4.542,7.02 11.865,7.03 9.668,0 18.9,-9.52 8.641004,-8.79 17.871004,-25.78998 21.385,-39.84 21.387,-75.728 0,-13.916 -4.981,-23.438 -3.663,-6.735 -12.451,-10.839 20.506,-13.329 35.156,-13.33 a 11.828,11.828 0 0 1 5.274,1.025 q 7.323,4.1 9.814,4.1 a 6.938,6.938 0 0 0 5.713,-2.783 6.416,6.416 0 0 0 1.611,-4.248 q 0,-4.539 -4.541,-8.056 a 17.77,17.77 0 0 0 -11.132,-3.37 q -9.23,0 -32.666,8.936 26.218,-51.559 58.593,-88.476 5.126,-6.006 5.127,-9.229 a 4.618,4.618 0 0 0 -2.051,-3.955 4.491,4.491 0 0 0 -3.076,-1.172 q -4.689,0 -11.279,6.592 -9.524,9.377 -24.023,29.883 -21.39,30.323 -43.8,78.662 -18.167004,12.009 -18.166004,19.772 z m 30.615004,4.688 q 4.246,5.568 4.248,16.552 0,28.274 -16.7,62.26 -14.800004,30.46498 -23.877004,30.45998 c -1.854,0 -3.465,-0.97 -4.834,-2.93 a 12.086,12.086 0 0 1 -1.9,-6.73 q 0,-19.48498 13.916,-54.78998 13.475004,-34.566 21.679004,-50.1 5.858,3.077 7.471,5.274 v 0 z"/>
<path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M460,150 q -16.26,11.282 -28.272,31.64 -12.89,21.972 -12.89,40.722 a 20.468,20.468 0 0 0 2.05,9.521 q 3.956,7.911 12.452,7.91 18.309,0 37.939,-32.373 18.018,-29.882 18.017,-49.365 0,-14.646 -12.011,-14.648 -7.767,0 -17.285,6.592 v 0 z m 0,53.613 a 45.37,45.37 0 0 1 -5.713,9.082 q -8.058,10.546 -15.088,10.547 a 5.744,5.744 0 0 1 -4.834,-2.637 7.524,7.524 0 0 1 -1.318,-4.395 q 0,-9.372 7.177,-23.583 a 92.43,92.43 0 0 1 17.871,-24.17 q 9.081,-9.081 13.77,-9.082 a 3.881,3.881 0 0 1 3.662,2.2 4.408,4.408 0 0 1 0.732,2.344 q 0,9.084 -13.183,23.877 -4.69,5.272 -4.688,6.445 0,1.614 3.662,4.541 0.145,0.147 -2.05,4.834 v 0 z"/>
</svg>
Give it a try.
Or you may want to just move each path like in this answer: https://stackoverflow.com/a/62637147/2218425
Related
Adding stroke increases the stroke-width
I have been given this svg file to add to a project, being new to SVG's I am sure I have missed something. It seems to be fine until I add the stroke to change the colour, as soon as this is applied the stroke-width seems to increase. I am not sure if this is related to the decimal places which I know can cause blurry lines but I don't think that is the issue here. I have tried adding stroke to the g tag and also tried it on the path tag. <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="dual-antenna" version="1.1" viewBox="0 0 8.4666664 8.4666664" height="32" width="32"> <g transform="translate(0,-288.53333)"> <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" /> </g> </svg>
Yes it increases because the path is a shape, to change the color you have to use the "fill" attribute. Stroke adds a stroke around the shape and therefore enlarges the shape. Look at the example : <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="dual-antenna" version="1.1" viewBox="0 0 8.4666664 8.4666664" height="32" width="32"> <g transform="translate(0,-288.53333)" stroke="#f0f" stroke-width="3%"> <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" /> </g> </svg> <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="dual-antenna" version="1.1" viewBox="0 0 8.4666664 8.4666664" height="32" width="32"> <g transform="translate(0,-288.53333)" fill="#f0f"> <path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" /> </g> </svg>
How can I accomplish these type of round buttons using HTML / CSS / JavaScript?
What I am trying to accomplish is several buttons aligned like a circle. It is supposed to be circular although it looks like an egg. I hope the image makes sense.
It's not super easy but you can do it. You would basically do something like this only you overlay another circle on the centre.
I think the best way here is to use svg.
Take a look here:
svg{width:170px}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<path fill="red" d="M 13.3974 50 A 100 100 0 0 1 186.6025 50 L 143.3012 75 A 50 50 0 0 0 56.6987 75 Z"></path>
<path fill="blue" d="M 186.6025 50 A 100 100 0 0 1 100 200 L 100 150 A 50 50 0 0 0 143.3012 75 Z"></path>
<path fill="green" d="M 100 200 A 100 100 0 0 1 13.3974 50 L 56.6987 75 A 50 50 0 0 0 100 150 Z"></path>
<g dominant-baseline="middle" text-anchor="middle" fill="white">
<path id="btn1" d="M 62.5 35.048 A 75 75 0 0 1 137.5 35.048" fill="transparent" />
<path id="btn2" d="M 175 100 A 75 75 0 0 1 137.5 164.9519" fill="transparent" />
<path id="btn3" d="M 62.5 164.9519 A 75 75 0 0 1 25 100" fill="transparent" />
<text>
<textPath startOffset="50%" xlink:href="#btn1">
Button 1
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn2">
Button 2
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn3">
Button 3
</textPath>
</text>
</g>
<text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello world!</text>
</svg>
You can check here about svg path, and here about text path.
For calculating the x and y of the points on the circle, note that x = centerX + Math.cos(angle) * radius and y = centerY + Math.sin(angle) * radius.
For example, at the example above the viewportis 200*200, so centerX = 100, centerY = 100, with outer radius 100, and inner radius 50. the top part going from angle -5*Math.PI/3, so the x point is 100 + Math.cos(-5*Math.PI/3)*100 = 13.3974 and y point is 100 + Math.sin(-5*Math.PI/3)*100 = 50 and so on
How to render string as SVG dynamically in Angular 8
I have list of items with icon as SVG string given below
steps=[
{
"id": 1,
"code": "ABC",
"dname": "abc",
"conveyStep": null,
"sequence": 1,
"fqcn": null,
"status": "A",
"icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">
<defs>
</defs>
<g id="noun_Document_188541" transform="translate(-15 -5)">
<g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">
<path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>
<path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>
<path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>
<path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>
<path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/>
<path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/>
<path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/>
<path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/>
<g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)">
<path id="Path_1052" d="M53.144 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1052" transform="translate(-53.078 -58.653)"/>
<path id="Path_1053" d="M61.8 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1053" transform="translate(-58.713 -58.653)"/>
</g>
<g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)">
<path id="Path_1054" d="M41.569 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.469-1.114z" class="cls-1" data-name="Path 1054" transform="translate(-36.196 -30.962)"/>
<path id="Path_1055" d="M32.915 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.475-1.114z" class="cls-1" data-name="Path 1055" transform="translate(-30.561 -30.962)"/>
</g>
</g>
</g>
</svg>`
},
{
...
}
];
...
now I want to show these SVG string as SVG in my HTML
but its not showing my SVG
<div class="scrollmenu" id="scroll_menu">
<div class="steps" *ngFor="let step of newSteps">
<p class="completed"></p>
<p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"><i class="fa fa-check-circle"
aria-hidden="true"></i></p>
<div class="step-image">
\\here I want to show my svg
</div>
</div>
</div>
and I want to give style to some of the svg depending upon some condition so is there any way to also give style to dynamically added avg?
any help would be appreciated.
So basically I was getting security issues after ignoring DomSanitizer so I went to https://angular.io/guide/security#xss and concluded and made changes in my code to get what I wanted.
I imported DomSanitizer
import { DomSanitizer} from '#angular/platform-browser';
....
newSteps=[];
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
for (let i = 0; i < this.steps.length; i++) {
this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));
}
}
and then simply user [innerHTML] tagin html file
<div id="steps" class="step-image" [innerHTML]="step">
</div>
You could create a directive that takes the svg string and adds it to the innerHTML of its host element. Then use the directive to dynamically apply styles to the inner svg.
NOTE: This bypasses Angular's DomSanitizer and leaves you open to XSS vulnerabilities. Only use this approach if you trust the source of the svg string.
#Directive({
selector: '[svgIcon]',
})
export class SvgIconDirective implements OnChanges {
#Input()
svg?: string;
constructor(
private _elementRef: ElementRef,
) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.svg) {
this._elementRef.nativeElement.innerHTML = '';
if (this.svg) {
this._elementRef.nativeElement.innerHTML = this.svg;
}
}
}
}
Resize svg icon using path element
I'm using a predesigned menu which has been used svg for drawing icons.
For some reasons, I have to change icon size using path element.
Now, I want to change icon and I have my own custom icons; So, I downloaded some svg icon of web, BUT icons which has been used by me, have the same size that they had, even if I use large svg icons made by material design icons.
This is my Original path element:
<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
And this is my svg structure:
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<path class="path-1" d="M45 67.9c0 2.3 1.9 4.1 4.2 4.1a4.1 4.1 0 1 0 0-8.3 4.1 4.1 0 0 0-4.1 4.2zm6 0c0 1-.8 1.7-1.8 1.7s-1.8-.7-1.8-1.7.8-1.8 1.8-1.8 1.8.7 1.8 1.8z"/>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M66.7 53.6l-.3.5-1.3 1.8-.3.4-.1.3V60l-.2.3v.1c-.3 1-1 1.4-2.3 1.4h-4.5l-.6.1a9 9 0 0 0-4 1.6l-1.7 1.1-.5.4-1.5 1a302.7 302.7 0 0 0-4 2.6c-.2 0-.3-.1-.5-.3L41.5 66l-1.7-1-.4-.4a141.7 141.7 0 0 1-3-1.8 9 9 0 0 0-2.6-.9h-.1a15.6 15.6 0 0 0-1.4 0h-3.7c-1.2 0-2-.6-2.3-1.5v-.1l-.1-.3V39c0-1.8.7-2.6 2.5-2.6h27.5l.7-2.1H28.7C25.8 34.3 24 36 24 39v21l.1.4a4.5 4.5 0 0 0 .4 1.4v.2l.4.5.2.1c0 .2.2.3.3.4l.2.2a3.4 3.4 0 0 0 .7.4 3.2 3.2 0 0 0 .8.3l.5.1.5.1h4.2l1 .1h.2a7.3 7.3 0 0 1 2.7 1l.3.2.9.6 2.6 1.7v.1l3.7 2.5a3 3 0 0 0 1.7.5 3 3 0 0 0 1.7-.5l3.6-2.5h.1l2.6-1.8 1-.6.2-.2.6-.3c.7-.4 1.4-.6 2.1-.7h5l.3-.1h.6l.5-.2h.3l.5-.3a2.8 2.8 0 0 0 .7-.4 5.3 5.3 0 0 0 .5-.6 3.9 3.9 0 0 0 .8-1.4l.2-.8v-6.9.1z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M70 25.6l-4-1.2a3 3 0 0 0-1.9 0c-.9.3-1.6 1.1-2 2.1l-.4 1.4-.2.5-.2.7-6.7 20.6.1 8.5v.2c.3.8.7 1.4 1.4 1.7.5.3 1.2.4 1.8.1.4-.1.8-.4 1.2-.8 1.2-1.5 2.4-3 3.4-4.6l1.6-2.3.1-.1 6.3-19.2.6-1.6.6-1.8c.6-1.9-.2-3.6-1.8-4.2zM56.3 50l6.4-19.5.6.2.7.3-6.3 19.3c-.6.2-1 .2-1.4 0V50zm4.1 1.4c-1.5.2-2-.6-2.1-.8l6.3-19.4 2.3.8-6.5 19.4zm.9 2.4a62 62 0 0 1-3 4l-1.9-.7v-6l1.4-.1c.3.5 1 1.2 2.7 1 .1.4.5.8 1.4.9l-.6 1zm1.5-2.2l-.4.6c-1 0-1.3-.3-1.4-.5l6.5-19.5 1.5.5-6.2 19zm7.4-22.4l-.6 1.9-5.8-2-.6-.1.2-.6.4-1.3c.3-1 1-1.4 1.8-1.2l3.8 1.3c.8.3 1.1 1.1.8 2z"/>
</g>
<g class="new-button">
<title>New Posts</title>
<circle class="Oval-2-Copy-13" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M46.1 46.5H36c-.4 0-.8.3-.8.8v1.5c0 .4.4.7.8.7h10.1c.2 0 .4.2.4.4V60c0 .4.3.8.8.8h1.5c.4 0 .7-.4.7-.8V49.9c0-.2.2-.4.4-.4H60c.4 0 .8-.3.8-.8v-1.5c0-.4-.4-.7-.8-.7H49.9a.4.4 0 0 1-.4-.4V36c0-.4-.3-.8-.8-.8h-1.5c-.4 0-.7.4-.7.8v10.1c0 .2-.2.4-.4.4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48 69a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0 3a24 24 0 1 1 0-48 24 24 0 0 1 0 48z"/>
</g>
<g class="bin-button" transform="translate(0 240)">
<title>Deleted Posts</title>
<circle class="Oval-2-Copy-12" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M57 28v-3.8H39.2V28h-10v8.2h4.4v35.5h29V36.3h4.3V28H57zm-15.7-1.8h13.6v1.9H41.3v-1.9zm19.2 43.6H35.7V36.3h24.8v33.5zM65 34.2H31.3v-4H65v4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M41 42.7h2v20.7h-2zm6.1 0h2v20.7h-2zm6.1 0h2.1v20.7h-2.1z"/>
</g>
</g>
<g class="home-menu" transform="translate(229 18)">
<g class="portfolio-button" transform="translate(119)">
<title>Portfolio</title>
<circle class="Oval-2-Copy-4" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 46v-5.6c0-3.5-2.9-6.4-6.4-6.4h-7l-1-3.5c-.6-1.8-2.3-3-4.1-3H42.9a4.3 4.3 0 0 0-4 3L37.8 34h-7a6.4 6.4 0 0 0-6.4 6.4V46c0 .5.3.9.7 1l1 .4v15.5c0 3.5 2.8 6.4 6.4 6.4h31c3.6 0 6.5-2.9 6.5-6.4V47.3l1-.4c.3-.1.6-.5.6-1zM40.9 31c.3-.9 1.1-1.5 2-1.5h10.2c.9 0 1.7.6 2 1.5l.9 3H40l1-3zm-14.3 9.3c0-2.3 1.9-4.2 4.2-4.2h34.4a4.3 4.3 0 0 1 4.2 4.2v4.8L48 53.5l-21.4-8.3v-4.8zm41.2 22.4a4.3 4.3 0 0 1-4.2 4.3H32.4c-2.3 0-4.2-2-4.2-4.3V48l19.4 7.5h.8L67.8 48v14.7z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.5 45a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0zm-6.8 0a2.3 2.3 0 1 1 2.3 2.3c-1.3 0-2.3-1-2.3-2.4z"/>
</g>
<g class="testimonials-button" transform="translate(0 23)">
<title>Testimonials</title>
<circle class="Oval-2-Copy-6" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.9 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.7-9.1 10.8 10.8 0 0 1 21.6 0c0 7-3.6 16.9-13.7 21.1l-.3.1c-1.1.5-3 1.3-4.6 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.3 1.8-2 4.2-3.6 5.4-1 1-2.4 1.8-4 2.8l-.5.2c-1.2.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.6.4 2.1 0 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-4-8.8-8.9-8.8zM27.4 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.6-9.1 10.8 10.8 0 0 1 21.5 0 23 23 0 0 1-13.7 21.1l-.2.1c-1.2.5-3 1.3-4.7 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.4 1.8-2 4.2-3.5 5.4-1.2 1-2.5 1.8-4.2 2.8l-.4.2c-1.1.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.9.6 3.7-.6 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-3.9-8.8-8.9-8.8z"/>
</g>
<g class="contact-button" transform="translate(239 23)">\
<title>Contact Us</title>
<circle class="Oval-2-Copy-5" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M40.4 42.7c1.4 0 1.4 2 0 2H29.1L36 56.3l7-7c1.1-1 2.5.4 1.6 1.4L37 58.2l3.4 6h21.5a290 290 0 0 0-6.5-10c-.7-1.3 1-2.4 1.8-1.2l2.5 3.8h9l-.4-4.7H57.9c-1.4 0-1.4-2 0-2h10.2l-.4-5.4h-5.8c-1.4 0-1.4-2 0-2h6.7c.6 0 1.1.3 1.1 1 .6 7 1.6 14.5 1.9 21.4a1 1 0 0 1-1.1 1H25.4a1 1 0 0 1-1-1l1.9-21.5c0-.4.5-1 1.1-1h13zM28.2 47l-1.6 17H38l-9.7-17zm36 17h5.2l-.5-5.3h-8l3.3 5.4zm-14-9.2c-2.7-3.3-8.7-11.7-8.7-16.1 0-5.4 4.4-9.4 9.6-9.4 5.1 0 9.7 4 9.7 9.4 0 4.4-6.1 12.8-9 16.1-.3.6-1 .5-1.5 0zm.9-2.2c2.3-2.8 7.5-10.5 7.5-14 0-4.2-3.5-7.1-7.5-7.1s-7.4 3-7.4 7.2c0 3.4 5.2 11.1 7.4 14zm0-19c2.3 0 4.2 2 4.2 4.3 0 2.2-1.9 4-4.2 4a4.1 4.1 0 0 1 0-8.2zm0 2.1c-1.1 0-2 1-2 2.2 0 1 .9 2 2 2a2 2 0 0 0 2.1-2c0-1.3-.9-2.2-2.1-2.2z"/>
</g>
</g>
<g class="settings-menu" transform="translate(228 654)">
<g class="security-button" transform="translate(120 24)">
<title>Secuirty Settings</title>
<circle class="Oval-2-Copy-8" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48.2 64.6c.5 0 1-.5 1-1v-4.8A4 4 0 0 0 48 51a4 4 0 0 0-.9 8v4.6c0 .6.5 1 1 1zM46 55a2 2 0 1 1 3.9 0 2 2 0 0 1-4 0zm19.2-3.1c.5 0 1-.5 1-1v-4c0-2.2-1.9-4-4.2-4h-3.3v-8.3a10.6 10.6 0 0 0-21.3 0v8.2h-3.3A4.2 4.2 0 0 0 30 47v20.4c0 2.3 1.9 4.2 4.2 4.2h28c2.2 0 4.1-1.9 4.1-4.2V57.3a1 1 0 1 0-2 0v10.1c0 1.2-1 2.1-2.2 2.1h-28a2 2 0 0 1-2-2V47a2 2 0 0 1 2-2.1h28a2 2 0 0 1 2.1 2v4c0 .5.5 1 1 1zm-8.6-9h-17v-8.3a8.5 8.5 0 0 1 17 0v8.2z"/>
</g>
<g class="profile-button">
<title>Profile Settings</title>
<circle class="Oval-2-Copy-9" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M60.7 46.5a14.9 14.9 0 1 0-25.6 0A21.7 21.7 0 0 0 26.3 64v3.3c0 2.3 1.9 4.2 4.2 4.2h34.8c2.3 0 4.2-1.9 4.2-4.2V64c0-6.9-3.3-13.3-8.8-17.4zM48 26.4a12.6 12.6 0 0 1 10.3 19.8A12.6 12.6 0 1 1 48 26.4zm19.2 40.8c0 1-.8 1.8-1.8 1.8H30.6c-1 0-1.9-.8-1.9-1.8v-3.3c0-6.1 3-11.8 7.8-15.5a15 15 0 0 0 11.4 5.4c4.5 0 8.6-2 11.5-5.4A19 19 0 0 1 67 64v3.3z"/>
</g>
<g class="contact-button" transform="translate(240)">
<title>Contact Settings</title>
<circle class="Oval-2-Copy-10" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M56.5 71.5L40 58.2h-9.4c-3 0-5.4-2.4-5.4-5.4v-23c0-3 2.4-5.3 5.4-5.3h34.1c3 0 5.4 2.4 5.4 5.3v23c0 3-2.4 5.4-5.3 5.4h-8.2v13.3zm-26.7-45c-2 .2-3 2.2-3 3.1v23.2c0 2.1 1 3.3 3 3.6h10.7l14.9 12.4V56.4H65c.8 0 3 .4 3-2.8 0-3.2.3-22 0-24-.2-2 0-3-3-3s-33.1-.2-35.2 0z"/>
</g>
</g>
<g class="faq-menu" transform="translate(18 229)">
<g class="writing-button" transform="translate(0 120)">
<title>Writing FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.2 26.8a8.6 8.6 0 0 0-12.1 0L29.1 55h-.2v.2l-.1.2v.1l-.1.2L24.4 70c-.1.4 0 1 .4 1.4.3.2.6.4 1 .4h.4l14.3-4.3h.2l.2-.2h.1l.1-.1h.1l28-28.2a8.6 8.6 0 0 0 0-12.2zM27.9 68.1l2.8-9.6 6.7 6.7-9.5 3zm12.2-4L32 55.8l24-24 8 8.2-24 24zm27-27.2l-1 1-8.1-8 1-1a5.7 5.7 0 0 1 8.1 0 5.6 5.6 0 0 1 0 8z"/>
</g>
<g class="reading-button" transform="translate(24)">
<title>Reading FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 70.7h-2.9V37.9h-9v-9.6H27.5v42.4h-2.9V25.4h38V35h9z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.4 36.9l-8.9-9.5 2.1-2 9 9.6zm-34.1 4.6h12.1v2.9H35.3zm0 11.7h25.5v3H35.3zm0 7.2h25.5v2.9H35.3z"/>
</g>
<g class="general-button" transform="translate(24 240)">
<title>General FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M54.3 68h-4V40.5a2 2 0 0 0-2-2h-6a2 2 0 1 0 0 4h4V68h-4a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4zm-7.8-36a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6z"/>
</g>
</g>
</g>
<g class="middle-layer" transform="translate(132 132)">
<circle class="middle-circle-backgroud" cx="264" cy="264" r="264" fill="#000" fill-opacity=".4"/>
<g class="button-group">
<g class="settings-button" transform="translate(216 408)">
<title>Settings Menu</title>
<circle class="Oval-2-Copy-3" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M49.4 30.5a6.2 6.2 0 0 1 0 12.2v24.6a1.4 1.4 0 0 1-2.8 0V42.7a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 2.8 0v1.6zm-4.8 6.1a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0zm-12.4 17a6.2 6.2 0 0 1 0 12.1v1.6a1.4 1.4 0 0 1-3 0v-1.6a6.2 6.2 0 0 1 0-12.1V28.9a1.4 1.4 0 0 1 3 0v24.7zm-4.8 6a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0zM66.7 45a6.2 6.2 0 0 1 0 12v10.3a1.4 1.4 0 0 1-2.9 0V57.1a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 3 0v16zM62 51a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0z"/>
</g>
<g class="faq-button" transform="translate(24 217)">
<title>FAQ Menu</title>
<circle class="Oval-2-Copy" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" stroke="#fff" d="M36.5 38.8c.6 0 1.2-.5 1.2-1.2a11 11 0 0 1 11.8-11 11 11 0 0 1 10 11.3c-.1 5.2-3.8 9.7-8.9 10.5a3.4 3.4 0 0 0-2.6 3.4v6a1.2 1.2 0 0 0 2.4 0v-6c0-1 .5-1 .7-1a13 13 0 0 0 10.8-12.9 13.3 13.3 0 1 0-26.6-.3c0 .7.5 1.2 1.2 1.2z"/>
<g class="Shape" fill-rule="nonzero">
<use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/>
<path stroke="#fff" d="M45.6 67.9a3.6 3.6 0 1 0 7.3 0c0-2-1.7-3.7-3.7-3.7s-3.6 1.6-3.6 3.7zm5.9 0c0 1.2-1 2.2-2.3 2.2-1.3 0-2.3-1-2.3-2.2 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3z"/>
</g>
</g>
<g class="home-button" transform="translate(216 24)">
<title>Home Menu</title>
<circle class="Oval-2-Copy-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M64.2 46.8c-.7 0-1.3.6-1.3 1.3v20.7h-7.3v-8a7.1 7.1 0 0 0-14.3 0v8H34V48.1a1.3 1.3 0 0 0-2.7 0v22c0 .8.6 1.4 1.4 1.4h10c.7 0 1.3-.6 1.3-1.3v-9.3a4.5 4.5 0 0 1 9 0v9.3c0 .7.5 1.3 1.2 1.3h10c.7 0 1.3-.6 1.3-1.3v-22c0-.8-.6-1.4-1.3-1.4zm6-1.2L49.3 25c-.5-.5-1.4-.5-2 0L26.8 45.6a1.3 1.3 0 1 0 2 2l19.7-19.9 19.9 19.8a1.3 1.3 0 1 0 1.8-1.9z"/>
</g>
<g class="more-button" transform="translate(408 217)">
<title>More Menu</title>
<circle class="Oval-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M29.8 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9 3.2 0 5.9-2.7 5.9-5.9S33 42 29.8 42zM48 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9A5.9 5.9 0 1 0 48 42zm18.2 0a5.9 5.9 0 0 0-5.9 5.8c0 3.2 2.7 5.9 5.9 5.9S72 51 72 47.8 69.4 42 66.2 42zm-36.4 2.6c1.8 0 3.3 1.4 3.3 3.2 0 1.8-1.5 3.3-3.3 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.3-3.3c0-1.8 1.5-3.2 3.3-3.2z"/>
</g>
</g>
</g>
<g class="main-menu" transform="translate(276 276)">
<title>Main Menu</title>
<circle class="inner-circle-background" cx="120" cy="120" r="120" fill="#000" opacity=".4"/>
<g class="menu-button" fill="#fff" fill-rule="nonzero" transform="translate(84 95)">
{{--<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>--}}
<path class="Shape" d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</g>
</g>
</g>
</g>
</svg>
I'm completely newbie to use svg, is there any way that I can use my custom icon with custom size just using path element?
Next I'm using your original path element instead of the icon already there. You can use any icon you want and of any size if you put it inside a <symbol> element. How did I do it: the <symbol> element has a viewBox="0 -11 72 72" Please note that the symbol is a square pf 72/72 units. When you use a symbol you can give the <use> element a x and a y attributes to position the icon where you need. You also can give the <use> element a width and a height attributes to size it to your needs. In order to get the value for the <symbol> element you may use the .getBBox() method for the content of the symbol. In this case I did: Shape.getBBox(). I hope it helps. <use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" /> <svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792"> <defs> <symbol id="test" viewBox="0 -11 72 72"> <path id="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/> </symbol> </defs> <g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)"> <g class="menu" transform="translate(571 143)"> <g class="outside-layer"> <circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/> <g class="more-menu" transform="translate(654 229)"> <g class="writing-button" transform="translate(24 120)"> <title>My Posts</title> <circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/> <use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" /> </g> </g> </g> </g> </g> </svg>
SVG - circle stretched in responsive lines
I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice. There you can see - JSFiddle This is my SVG Code <svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#firstLine"/> </animateMotion> </circle> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#secondLine"/> </animateMotion> </circle> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#thirdLine"/> </animateMotion> </circle> <circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> </circle> </svg>
Maybe you dont need it now but I could do it giving the viewbox the desired ratio: i.e: 0 0 100 100 for an square ratio 0 0 25 100 for an vertical ratio 0 0 100 25 for a horizontal ratio. Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.