Streaming live at 10am (PST)

How to add actions to SVG


#1

Hi, I am creating a website that needs an SVG to perform certain actions on click of each segment.
So if you click a segment I want it to open the pop-up on the right, and each segment will open a different thing.

Here is the site at the moment: http://ideal-it-pathways.webflow.io/

The SVG code is like this:

      <svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1119.6 1125.1" style="enable-background:new 0 0 1119.6 1125.1;" xml:space="preserve">
<style type="text/css">
  #inner:hover{
	fill:#b42268;}
  #outer:hover{
	fill:#182933;}
</style>
<g>
	<g>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M572.1,564.3l325.7-188c2.3-1.3,3.1-4.3,1.8-6.6c-65.9-115-188.6-193.2-329.8-196.5c-2.7-0.1-4.9,2.1-4.9,4.8
			v382.1C564.9,563.8,568.9,566.1,572.1,564.3z"/>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M891.1,762.6c2.3,1.3,5.2,0.6,6.6-1.7C931.6,703,951,635.6,951,563.6c0-63.5-15.2-123.5-42.1-176.5
			c-1.2-2.5-4.3-3.3-6.7-2L577.1,572.9c-3.2,1.9-3.2,6.5,0,8.4L891.1,762.6z"/>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M554.9,560.1V178c0-2.7-2.2-4.9-4.9-4.8c-140.9,3.7-263.3,82.1-328.9,197c-1.3,2.3-0.5,5.2,1.8,6.5
			l324.8,187.5C550.8,566.1,554.9,563.8,554.9,560.1z"/>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M218.3,385.7c-2.4-1.4-5.5-0.5-6.7,2c-26.7,52.9-41.8,112.7-41.8,176c0,71.7,19.3,138.9,53.1,196.7
			c1.3,2.3,4.3,3,6.6,1.7l313.2-180.8c3.2-1.9,3.2-6.5,0-8.4L218.3,385.7z"/>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M564.9,594.1v355.2c0,2.7,2.2,4.9,4.9,4.8C702.6,951,819,881.6,887.2,777.7c1.5-2.3,0.8-5.4-1.6-6.8
			l-313.5-181C568.9,588.1,564.9,590.4,564.9,594.1z"/>
		<path id='inner' fill='#C92881' href="https://www.google.com" d="M547.6,589.9L235,770.4c-2.4,1.4-3.2,4.5-1.6,6.8c68,103.9,184.1,173.4,316.6,176.9c2.7,0.1,4.9-2.1,4.9-4.8
			V594.1C554.9,590.4,550.8,588.1,547.6,589.9z"/>
	</g>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M725.1,30.7c-0.4-0.7-1-1.2-1.8-1.5C670.6,13.2,615.5,5,559.8,5c-55.7,0-110.7,8.2-163.5,24.2
		c-0.8,0.2-1.4,0.8-1.8,1.5c-0.4,0.7-0.4,1.5-0.2,2.3l44.5,136.9c0.5,1.5,2.2,2.4,3.7,1.9c37.9-11.3,77.4-17,117.3-17
		c39.9,0,79.4,5.7,117.3,17c0.3,0.1,0.6,0.1,0.9,0.1c1.3,0,2.4-0.8,2.9-2.1L725.3,33C725.6,32.3,725.5,31.4,725.1,30.7z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M1006.9,227.7C940.3,139.6,846.3,71.3,742.5,35.5c-0.8-0.3-1.6-0.2-2.3,0.1c-0.7,0.4-1.3,1-1.5,1.8
		l-44.5,136.9c-0.5,1.5,0.3,3.2,1.9,3.8c37.6,13.2,73.1,31.9,105.4,55.5c31.9,23.3,60.3,51,84.3,82.4c0.6,0.8,1.5,1.2,2.4,1.2
		c0.6,0,1.2-0.2,1.8-0.6l116.4-84.6c0.7-0.5,1.1-1.2,1.2-2C1007.6,229.2,1007.4,228.4,1006.9,227.7z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M1018.7,244c-0.5-0.7-1.2-1.1-2-1.2c-0.8-0.1-1.6,0.1-2.3,0.5l-116.4,84.6c-1.3,1-1.6,2.8-0.7,4.1
		c45.5,65.7,70.5,142.9,72.4,223c0,1.6,1.4,2.9,3,2.9h143.9c0.8,0,1.6-0.3,2.1-0.9c0.6-0.6,0.9-1.4,0.9-2.2
		C1117.7,442.9,1082.8,335.4,1018.7,244z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M1118.8,572.8c-0.6-0.6-1.3-0.9-2.1-0.9H972.8c-1.6,0-3,1.3-3,2.9c-1.9,80.2-26.9,157.3-72.4,223
		c-0.9,1.3-0.6,3.2,0.7,4.1l116.4,84.6c0.5,0.4,1.1,0.6,1.8,0.6c0.2,0,0.3,0,0.5,0c0.8-0.1,1.5-0.6,2-1.2
		c64.1-91.4,99-198.9,101-310.9C1119.7,574.2,1119.4,573.4,1118.8,572.8z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M1007.4,899.9c-0.1-0.8-0.6-1.5-1.2-2l-116.4-84.6c-1.3-1-3.2-0.7-4.1,0.6c-24,31.4-52.4,59.1-84.3,82.4
		c-32.3,23.6-67.8,42.3-105.4,55.5c-1.5,0.5-2.4,2.2-1.9,3.8l44.5,136.9c0.2,0.8,0.8,1.4,1.5,1.8c0.4,0.2,0.9,0.3,1.3,0.3
		c0.3,0,0.7-0.1,1-0.2c103.9-35.9,197.8-104.2,264.4-192.3C1007.4,901.5,1007.6,900.7,1007.4,899.9z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M725.3,1096.8l-44.5-136.9c-0.5-1.5-2.1-2.4-3.7-1.9c-37.9,11.3-77.4,17-117.3,17c-39.9,0-79.4-5.7-117.3-17
		c-1.6-0.5-3.2,0.4-3.7,1.9l-44.5,136.9c-0.2,0.8-0.2,1.6,0.2,2.3c0.4,0.7,1,1.2,1.8,1.5c52.8,16.1,107.8,24.2,163.5,24.2
		c55.7,0,110.7-8.2,163.5-24.2c0.8-0.2,1.4-0.8,1.8-1.5C725.5,1098.4,725.6,1097.6,725.3,1096.8z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M423.7,951.9c-37.6-13.2-73.1-31.9-105.4-55.5c-31.9-23.3-60.3-51-84.3-82.4c-1-1.3-2.8-1.6-4.1-0.6
		l-116.4,84.6c-0.7,0.5-1.1,1.2-1.2,2c-0.1,0.8,0.1,1.6,0.6,2.3c66.6,88.1,160.5,156.4,264.4,192.3c0.3,0.1,0.6,0.2,1,0.2
		c0.5,0,0.9-0.1,1.3-0.3c0.7-0.4,1.3-1,1.5-1.8l44.5-136.9C426,954.1,425.2,952.4,423.7,951.9z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M222.3,797.9c-45.5-65.7-70.5-142.9-72.4-223c0-1.6-1.4-2.9-3-2.9H3c-0.8,0-1.6,0.3-2.1,0.9S0,574.2,0,575
		c2,112,36.9,219.5,101,310.9c0.5,0.7,1.2,1.1,2,1.2c0.2,0,0.3,0,0.5,0c0.6,0,1.2-0.2,1.8-0.6L221.6,802
		C222.9,801.1,223.2,799.2,222.3,797.9z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M221.6,327.8l-116.4-84.6c-0.6-0.5-1.5-0.7-2.3-0.5c-0.8,0.1-1.5,0.6-2,1.2C36.9,335.4,2,442.9,0,554.9
		c0,0.8,0.3,1.6,0.9,2.2c0.6,0.6,1.3,0.9,2.1,0.9h143.9c1.6,0,3-1.3,3-2.9c1.9-80.2,26.9-157.3,72.4-223
		C223.2,330.6,222.9,328.8,221.6,327.8z"/>
	<path id='outer' fill='#293C46' href="https://www.google.com" d="M425.5,174.2L381.1,37.4c-0.2-0.8-0.8-1.4-1.5-1.8c-0.7-0.4-1.6-0.4-2.3-0.1
		C273.3,71.3,179.4,139.6,112.8,227.7c-0.5,0.6-0.7,1.5-0.6,2.3c0.1,0.8,0.6,1.5,1.2,2l116.4,84.6c0.5,0.4,1.1,0.6,1.8,0.6
		c0.9,0,1.8-0.4,2.4-1.2c24-31.4,52.4-59.1,84.3-82.4c32.3-23.6,67.8-42.3,105.4-55.5C425.2,177.5,426,175.8,425.5,174.2z"/>
</g>
</svg>