Trying to reference image on a tooltip within an SVG map. The reference is as the following:
<path
inkscape:connector-curvature="0"
id="BD"
data-info="<div>Bangladesh</div><div><img src="http://www.digi4health.org/wp-content/uploads/2018/09/bd.png" alt="Bangladesh mHealth" width="600" height="171"></div><div>Some Description</div>"
data-name="Bangladesh"
data-id="BD"
d="m 1486.5,431.9 -4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
style="fill:#c1f4ff;fill-rule:evenodd" />
I have SVG world map, where I have added some descriptions in a popup info box related to my project. Currently, on the infobox I just have text. I am trying to include some pictures within the pop infobox.
Here I am sharing the full code for better understanding. Appreciate your support.
Your code is all wrong and I'm not very sure what are you asking. Take a look at the following example and tell me if this is what you need:
<svg viewbox = "1450 400 50 50">
<clipPath id="Bangladesh">
<path d="m 1486.5,431.9 l-4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
/>
</clipPath>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="1450" y="400" height="50" width="50" clip-path="url(#Bangladesh)"/>
</svg>
I wasn't able to use your image since it comes from an http (not secure).
Related
I'm new at coding.
I'm studying the way to make an animated portfolio like Sean Halpin or Stephanie Walter one. I want to put a face, in which, blinking eyes and a moving the mouth would be the animated elements. Basically, I want to play with the visibility of the closed eyes and open mouth. As an example, I drew a face as follows:
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 429">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
}
</style>
</defs>
<g id="face">
<path class="cls-1" d="M611,608.5a214,214,0,1,1,151.32-62.68A212.6,212.6,0,0,1,611,608.5Z" transform="translate(-396.46 -180)" />
<path d="M611,181a212.9,212.9,0,1,1-83.1,16.78A212.11,212.11,0,0,1,611,181m0-1c-118.46,0-214.5,96-214.5,214.5S492.5,609,611,609s214.5-96,214.5-214.5S729.43,180,611,180Z" transform="translate(-396.46 -180)" />
</g>
<g id="eyes">
<g id="eye_r">
<circle class="cls-1" cx="319.15" cy="128.63" r="48.5" />
<path d="M715.61,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)" />
</g>
<g id="iris_r">
<circle cx="319.15" cy="128.63" r="19" />
</g>
<g id="eye_l">
<circle class="cls-1" cx="109.85" cy="128.63" r="48.5" />
<path d="M506.32,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)" />
</g>
<g id="iris_l">
<circle cx="109.85" cy="128.63" r="19" />
</g>
<line id="closed_eye_l" class="cls-2" x1="62.04" y1="128.5" x2="158.04" y2="128.5" />
<line id="closed_eye_r" class="cls-2" x1="270.69" y1="128.23" x2="366.69" y2="128.23" />
</g>
<g id="closed_mouth">
<ellipse cx="214.5" cy="309" rx="108.5" ry="11.5" />
<path d="M611,478c29.08,0,56.41,1.25,77,3.51,30.68,3.38,31,7.32,31,7.49s-.35,4.11-31,7.49C667.37,498.75,640,500,611,500s-56.41-1.25-77-3.51c-30.69-3.38-31-7.32-31-7.49s.35-4.11,31-7.49c20.55-2.26,47.88-3.51,77-3.51m0-1c-60.2,0-109,5.37-109,12s48.8,12,109,12,109-5.37,109-12-48.8-12-109-12Z" transform="translate(-396.46 -180)" />
</g>
</svg>
So, I thought three ways to do this:
Place the svg inside an tag, calling then a function that takes into consideration the loading of the file. An example of what I'm saying is found in the following resource: https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/, in the "External SVG + External JavaScript" part. It didn't work. The contentDocument ALWAYS returns "null".
In my example, it would be:
HTML:
<object id="face" data="path/to/face.svg" type="image/svg+xml"></object>
JS:
<script type="text/javascript">
window.addEventListener("load", function() {
var svgObject = document.getElementById('face').contentDocument;
var svg = svgObject.getElementById('closed_eye_r');
svg.style.visibility="hidden";
});
</script>
Inline SVG - call a "transform" property. Sean Halpin does it but I'm not sure what he does.
HTML: https://www.seanhalpin.design/
JS: https://www.seanhalpin.design/js/scripts.js
Inline SVG, use getElementById and apply functions to animate the internal parts of the SVG file.
Questions:
a. Is Inline SVG a good practice?
b. Which is the best way to animate an SVG?
I hope to have been clear. Let me know if something is not well presented, I want to learn to edit questions in order to make them as clear as possible.
Thanks!
I have an SVG with <path> elements embedded into a website which will work as an image map. The client has told me she wants numbers and embedded on each of the paths, and text on others. Any ideas how to accomplish this?
Maybe if I could access the centre coordinate of every zone, I could use some JS to position the text to there, but I am not sure how to do that.
Here is some of the code with example paths to hide client information:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 916.32 2130.72" style="enable-background:new 0 0 916.32 2130.72;" xml:space="preserve">
<g id="Layer_2">
<image style="overflow:visible;" width="1909" height="4439" id="bg" xlink:href="map.jpg" transform="matrix(0.48 0 0 0.48 0.0681 -1.0503)">
</image>
</g>
<g id="Layer_1">
<a xlink:href="#">
<path id="path1" class="st0" d="M766.56,190.56l78.24-82.08l28.8,4.8l18.24,79.68l-26.88,72.48l-86.4-33.6l-0.48-7.2V213.6
l-1.92-7.68l-4.32-6.72L766.56,190.56z"></path>
</a>
<path id="path2" class="st0" d="M530.88,272.16l64.8-2.88l5.76,74.4l-67.68,1.44L530.88,272.16z"></path>
<path id="path3" class="st0" d="M407.52,276.96l45.12-0.48l5.28,72.48l-83.52,4.32L407.52,276.96z"></path>
</g>
</svg>
You could use <textPath> SVG element to draw all your textes. For each text you have to use one <textPath> and one <path> element for it. To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. All this <path> elements you have to add into <defs> element with unique ID. Read more about this element and his attributes under the link above.
And it is very important: all your <textPath> elements you have to write within <text> element on the end of yor SVG because of the zIndex (the lattest added element is on top).
And here is the demo how it works:
<svg width="400" height="120" viewBox="0 0 1000 300">
<defs>
<path id="MyPath1"
d="M 100 200
C 200 100 300 0 400 100
C 500 200 600 300 700 200
C 800 100 900 100 900 100"/>
<path id="MyPath2" d="M300,300L700,50"/>
</defs>
<!-- red line under text. You can delete the following line -->
<use href="#MyPath1" fill="none" stroke="red"/>
<text font-family="Verdana" font-size="42.5">
<textPath href="#MyPath1">We go up, then we go down, then up again</textPath>
<textPath href="#MyPath2" fill="red">And the second text</textPath>
</text>
Unfortunately, we can not use your code, because it is incomplete.
I have an SVG with elements embedded into a website which will
work as an image map. The client has told me she wants numbers and
embedded on each of the paths, and text on others.
I want to show you step by step the technique with which this kind of problem is solved.
It is not necessary to draw a map of the region in svg. You can take a screenshot of a fragment of a real map and add any text information to it.
I took a screenshot of the map drawing from the question and uploaded it to the vector editor
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="948" height="761" viewBox="0 0 948 761" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/DriVh.jpg" width="100%" height="100%" />
</svg>
At the second step in the vector editor using the tool Draw Bezier curves and straight lines, lines are created along which the text will be located.
The file is saved in SVG format and the paths of these lines are copied from it.
The required text will be located along these patches.
The beginning of the text on the line can be adjusted with the attribute startOffset ="35%"
Due to the fact that the bitmap and the text are located within the same SVG, the relative positioning will never be violated on any display of the gadget.
Below is the complete application code
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="948" height="761" viewBox="0 0 948 761" preserveAspectRatio="xMinYMin meet">
<!-- Screenshot of a map fragment -->
<image xlink:href="https://i.stack.imgur.com/DriVh.jpg" width="100%" height="100%" />
<!-- Paths along which text information will be located -->
<path id="pali" d="m274.8 751.9c0 0-0.5-105.9 4.6-158.5 4.7-49.1 13-97.9 23.9-145.9 9.9-43.6 19.5-87.9 37.6-128.8 15.1-34.1 28.3-97.8 41-147.1 7.8-30.3 21.7-91.2 21.7-91.2" style="fill:none;stroke-width:2;stroke:none"/>
<path id="south50" d="m228 291.3 94.6-5.7" style="fill:none;"/>
<path id="south50_2" d="m399 269.7c0 0 101.8-5 152.8-6.8 28.1-1 56.3-1.2 84.4-2.3 24.3-0.9 48.9 0.6 73-3.4 16-2.7 30.7-11.4 46.7-13.7 0.4-0.1 1.1 0 1.1 0" style="fill:none;"/>
<path id="south120" d="m348.9 516.2c0 0 76-3.4 114-4.6 35.3-1.1 72.7-2.8 106-2.3 25.1 0.4 4.1 101.1 2.3 151.6-1.1 30.9-8 92.3-8 92.3" style="fill:none;"/>
<path id="south120_2" d="m600.8 509 209.8-9.1" style="fill:none;"/>
<text font-family="serif" font-size="22px" font-weight="700">
<textPath href="#pali" startOffset="35%">Palisades DR street</textPath>
<textPath href="#south50" >50 south</textPath>
<textPath href="#south50_2" startOffset="75%" >50 south</textPath>
<textPath href="#south120" startOffset="15%" >120 south</textPath>
<textPath href="#south120_2" startOffset="55%" >120 south</textPath>
</text>
</svg>
As a bonus, the option to animate the route to the office
Please read the comments in the program code.
I hope this will help you understand the principle of the route animation
The animation will start after clicking on the SVG canvas
.container {
width:75vw;
height:75vh
}
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 948 761" preserveAspectRatio="xMinYMin meet" >
<defs>
<mask id="msk" >
<!-- Animation of a mask showing route growth -->
<path stroke="white" stroke-width="3" stroke-dasharray="1212" stroke-dashoffset="1212" stroke-dash-offset="1212" id="trace" d="m555.2 749.6c0 0 6.6-76 9.1-114 2.8-41.4 25.3-116.9 6.8-124.3-46.7-18.7-133.3 6.7-199.5 0-20.8-2.1-48.8 4.1-61.6-12.5-21.3-27.8 0.8-70.4 6.8-104.9 5.9-33.5 14.9-66.9 28.5-98 4.4-10.2 7.7-22.7 17.1-28.5 34.4-21.2 80.5-7 120.8-9.1 41.4-2.1 82.9-1.5 124.3-3.4 29.7-1.4 59.3-3.6 88.9-5.7 9.9-0.7 20.1 0.3 29.6-2.3 29.8-8.2 83.2-41 83.2-41">
<animate attributeName="stroke-dashoffset"
begin="svg1.click"
dur="10s"
values="1212;0"
fill="freeze" />
</path>
</mask>
<symbol id="marker" width="4%" viewBox="0 0 365 560" >
<path id="marker" fill="#00AEEF" d="M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9
C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8
c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z"/>
</symbol>
</defs>
<!-- Fragment of a raster map -->
<image xlink:href="https://i.stack.imgur.com/DriVh.jpg" width="100%" height="100%" />
<!-- patches along which text information is located -->
<path id="pali" d="m274.8 751.9c0 0-0.5-105.9 4.6-158.5 4.7-49.1 13-97.9 23.9-145.9 9.9-43.6 19.5-87.9 37.6-128.8 15.1-34.1 28.3-97.8 41-147.1 7.8-30.3 21.7-91.2 21.7-91.2" style="fill:none;stroke-width:2;stroke:none"/>
<path id="south50" d="m228 291.3 94.6-5.7" style="fill:none;"/>
<path id="south50_2" d="m399 269.7c0 0 101.8-5 152.8-6.8 28.1-1 56.3-1.2 84.4-2.3 24.3-0.9 48.9 0.6 73-3.4 16-2.7 30.7-11.4 46.7-13.7 0.4-0.1 1.1 0 1.1 0" style="fill:none;"/>
<path id="south120" d="m348.9 516.2c0 0 76-3.4 114-4.6 35.3-1.1 72.7-2.8 106-2.3 25.1 0.4 4.1 101.1 2.3 151.6-1.1 30.9-8 92.3-8 92.3" style="fill:none;"/>
<path id="south120_2" d="m600.8 509 209.8-9.1" style="fill:none;"/>
<!-- Route to the office -->
<path id="trace_anim" mask="url(#msk)" fill="none" stroke="crimson" stroke-width="4" stroke-dasharray="10 7" d="m555.2 749.6c0 0 6.6-76 9.1-114 2.8-41.4 25.3-116.9 6.8-124.3-46.7-18.7-133.3 6.7-199.5 0-20.8-2.1-48.8 4.1-61.6-12.5-21.3-27.8 0.8-70.4 6.8-104.9 5.9-33.5 14.9-66.9 28.5-98 4.4-10.2 7.7-22.7 17.1-28.5 34.4-21.2 80.5-7 120.8-9.1 41.4-2.1 82.9-1.5 124.3-3.4 29.7-1.4 59.3-3.6 88.9-5.7 9.9-0.7 20.1 0.3 29.6-2.3 29.8-8.2 83.2-41 83.2-41" />
<text font-family="serif" font-size="22px" font-weight="700">
<textPath href="#pali" startOffset="35%">Palisades DR street</textPath>
<textPath href="#south50" >50 south</textPath>
<textPath href="#south50_2" startOffset="75%" >50 south</textPath>
<textPath href="#south120" startOffset="15%" >120 south</textPath>
<textPath href="#south120_2" startOffset="55%" >120 south</textPath>
</text>
<!-- Markers on the map -->
<use xlink:href="#marker" x="800" y="-200" />
<use xlink:href="#marker" x="550" y="350" />
</svg>
</div>
I am following this tutorial : https://archive-2_1_4.lightningdesignsystem.com/resources/lightning-svg-icon-component-helper on how to use svg on lightning component but for some reason it is not working for my case:
I have already created the component svgIcon and added all the code into it.
In my case it does not seem to work since its showing a non sense blue square.
I uploaded the svg file into static resource and tried smth like this:
<c:svgIcon svgPath="{!$Resource.feedIcon}" category="standard" size="large" name="user" />
While this part on the tutorial looks as following:
<c:svgIcon svgPath="/resource/slds214/assets/icons/standard-sprite/svg/symbols.svg#user" category="standard" size="large" name="user" />
Dosnt specify where does they store the svg and also dont know what #user stands for in this case
The svg file I uploaded to salesforce static resources looks as below:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="82px" height="82px" viewBox="0 0 82 82" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>Group 4</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Icons-for-svg-export" transform="translate(-119.000000, -118.000000)" fill="#8B8D8E">
<g id="Group-4" transform="translate(120.000000, 119.000000)">
<g id="Group-3" stroke="#8B8D8E" stroke-width="0.4">
<g id="chat">
<path d="M68.2614576,11.7212036 C60.7001948,4.16069852 50.6693958,0 39.979772,0 C29.2899367,0 19.2593492,4.16069852 11.6980863,11.7212036 C-2.91552041,26.3339658 -3.9306097,49.72521 9.17822921,65.5056316 C7.8922944,68.0929603 5.8291323,71.1039699 2.76758412,72.6094747 C1.2957998,73.3363284 0.467405755,74.9094868 0.720913785,76.5331741 C0.974421815,78.1568613 2.22652736,79.4253669 3.85033192,79.6788567 C4.61106745,79.7976733 5.69381525,79.9158558 7.01273359,79.9158558 C10.5485257,79.9158558 15.758232,79.0866759 21.0861293,75.2481778 C27.0229533,78.4441778 33.5185944,80 39.9632802,80 C50.3144,80 60.5646663,75.9921564 68.2779494,68.2796421 C75.8390008,60.7189256 80,50.6899085 80,40 C80,29.3111486 75.8216633,19.2810744 68.2614576,11.7212036 Z M65.0303403,65.0489696 C53.6129644,76.4655204 35.9369638,78.7314944 22.0335601,70.5631637 C21.12017,70.0213003 19.9868898,70.1906458 19.2593492,70.9181338 C19.1916907,70.9521721 19.1238207,71.0024894 19.0734997,71.0528068 C14.4896347,74.6048341 9.99013149,75.3488126 7.01273359,75.3488126 L6.99624183,75.3488126 C10.429489,72.8458396 12.5949846,69.1253125 13.863582,66.2331196 C14.066769,65.7426308 14.1005982,65.2348057 13.9817729,64.7614417 C13.9314519,64.3047796 13.7456024,63.8481176 13.4233787,63.4755998 C1.04229177,49.4882108 1.68483631,28.1779502 14.9125005,14.9512418 C28.7317539,1.13298696 51.2112983,1.13298696 65.0130028,14.9512418 C78.8495937,28.7692852 78.8495937,51.2307148 65.0303403,65.0489696 Z" id="Fill-1"></path>
</g>
</g>
<path d="M40,39 C45.5228475,39 50,34.5228475 50,29 C50,23.4771525 45.5228475,19 40,19 C34.4771525,19 30,23.4771525 30,29 C30,34.5228475 34.4771525,39 40,39 Z M40,34 C37.2385763,34 35,31.7614237 35,29 C35,26.2385763 37.2385763,24 40,24 C42.7614237,24 45,26.2385763 45,29 C45,31.7614237 42.7614237,34 40,34 Z" id="Oval" fill-rule="nonzero"></path>
<path d="M53.3820358,52.1419451 L53.3820358,58.0287934 L58.3820358,58.0287934 L58.3820358,52.0610237 C58.3820358,50.6620146 57.7745968,49.3319332 56.7172836,48.4157917 L56.7172836,48.4157917 C47.0341731,40.0255636 32.5627654,40.3598339 23.2773818,49.188209 C22.7810083,49.660152 22.5,50.3150789 22.5,51 L22.5,58.0287934 L27.5,58.0287934 L27.5,52.1101962 C34.9103462,45.7645802 45.9109476,45.7203441 53.3820358,52.1419451 Z" id="Path-3" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Any idea how can I use svg icons in lightening component?
Add Svg in static resources and use like this.
"{!$Resource.delawareSVGs + '/Icons/exclamation-mark.svg'}"
I want to use my own designed custom icons in react which I have in both formats SVG and TTF.
How can I do that? I want to put those icons in my navbar like a custom home icon for home button.
I'm not sure how is you webpack configured to resolve svg and include them in your build, But I can give you two different approaches here:
You can make separate SVG files generated from some tool in xml
myIcon.svg
<?xml version="1.0" encoding="UTF-8"?>
<svg width="26px" height="26px" viewBox="0 0 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>bus-start</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Booking-a-trip" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Verify" transform="translate(-113.000000, -312.000000)">
<g id="Group-3" transform="translate(63.000000, 144.000000)">
<g id="bus-start" transform="translate(51.000000, 169.000000)">
<circle id="Oval" stroke="#606C74" fill="#FFFFFF" cx="12" cy="12" r="12"></circle>
<path d="M6,15.0585702 C6,15.6952627 6.2925,16.2668389 6.75,16.6647717 L6.75,17.952627 C6.75,18.3505599 7.0875,18.6761413 7.5,18.6761413 L8.25,18.6761413 C8.6625,18.6761413 9,18.3505599 9,17.952627 L9,17.2291128 L15,17.2291128 L15,17.952627 C15,18.3505599 15.3375,18.6761413 15.75,18.6761413 L16.5,18.6761413 C16.9125,18.6761413 17.25,18.3505599 17.25,17.952627 L17.25,16.6647717 C17.7075,16.2668389 18,15.6952627 18,15.0585702 L18,7.82342808 C18,5.29112834 15.315,4.92937123 12,4.92937123 C8.685,4.92937123 6,5.29112834 6,7.82342808 L6,15.0585702 Z M8.625,15.7820844 C8.0025,15.7820844 7.5,15.2973299 7.5,14.6968131 C7.5,14.0962963 8.0025,13.6115418 8.625,13.6115418 C9.2475,13.6115418 9.75,14.0962963 9.75,14.6968131 C9.75,15.2973299 9.2475,15.7820844 8.625,15.7820844 Z M15.375,15.7820844 C14.7525,15.7820844 14.25,15.2973299 14.25,14.6968131 C14.25,14.0962963 14.7525,13.6115418 15.375,13.6115418 C15.9975,13.6115418 16.5,14.0962963 16.5,14.6968131 C16.5,15.2973299 15.9975,15.7820844 15.375,15.7820844 Z M16.5,11.4409991 L7.5,11.4409991 L7.5,7.82342808 L16.5,7.82342808 L16.5,11.4409991 Z" id="Shape" fill="#606C74" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</svg>
Later in your component you can import it like :
import myIcon from 'assets/myIcon.svg' // depending on your folder structure
in render method:
render(){
return (
<img src={myIcon} />
)
}
Second approach you can make your svg in react using <svg>:
here is the working codesandbox: Svg Icon + React
I have read this documentation http://www.w3.org/TR/SVG/animate.html about svg animation and i know how to animate rectangle,circle etc,but this document doesn't contains any info on how to animate entire svg "path" element.
I am creating bow and arrow game and i want to animate the "path" element to the right when user clicks on a button. i just want to know how to animate entire "path" element??
In the below code i want to animate second "path" element to the right...
<svg width="500" height="500">
<path d="M150,150 l0,150 q80,-50 0,-150 M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:black;stroke-width:5;fill:red;"/>
<path d="M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:orange;width:5" />
</svg>
After some trail and error i finally resolve my issue.Below is the code for the same.
<svg width="500" height="500">
<path d="M150,150 l0,150 q80,-50 0,-150 M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:black;stroke-width:5;fill:red;"/>
<path d="M220,230 l-120,0 m120,0 l-20,10 m20,-10 l-20,-10" style="stroke:orange;width:5">
<animateMotion
path="M0,0 l300,0"
begin="0s" dur="5s" repeatCount="1"
/>
</path>
</svg>