cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
MikeLockwood
Level 8

SVG Image with inline styling not working

I am looking into using SVG images for buttons as opposed to the builtin icons as there is such a limited set.  The key is that I want to have the ability for the Hover and Pressed functionality.  With a little research I found that you can use CSS Style commands within the SVG code.  So I created the below that works fine in a HTML file or in something like CodePen.  When I add this to an image the base fill color is used but the hover and active attributes are never applied to the image.  I could probably work through doing this a bit in reverse where I change the background color but depending on the background color one would want to change the forecolor/text color which cant be done.  Anyone have any thoughts?

 

<svg version='1.1' class='icon' 
	 viewBox='0 0 512 512' fill='black' width='100px' height='100px'>
<style>
  .icon{fill: black}
  .icon:hover{fill:blue}
  .icon:active{fill:green}
  </style>
  <g >
<g>
	<g>
		<path d='M108.512,275.939c4.15,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.365-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515v8.591c-11.858,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.21c5.912,0,10.721,4.809,10.721,10.721s-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.365-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515
			c0,11.984,9.156,21.87,20.841,23.03v8.231c0,4.151,3.365,7.515,7.515,7.515c4.15,0,7.515-3.364,7.515-7.515v-8.591
			c11.858-2.299,20.841-12.756,20.841-25.275c0-14.199-11.552-25.75-25.75-25.75h-5.21c-5.912,0-10.721-4.809-10.721-10.721
			s4.809-10.721,10.721-10.721h7.815c4.475,0,8.116,3.641,8.116,8.117v5.21C100.997,272.575,104.362,275.939,108.512,275.939z'/>
	</g>
</g>
<g>
	<g>
		<path d='M276.841,83.563c4.151,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.364-7.515-7.515-7.515c-4.15,0-7.515,3.364-7.515,7.515v8.591c-11.858,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.21c5.912,0,10.721,4.809,10.721,10.721s-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.365-7.515-7.515-7.515s-7.515,3.364-7.515,7.515c0,11.984,9.156,21.87,20.841,23.03
			v8.231c0,4.151,3.365,7.515,7.515,7.515c4.151,0,7.515-3.364,7.515-7.515v-8.591c11.857-2.299,20.841-12.756,20.841-25.275
			c0-14.199-11.552-25.75-25.75-25.75h-5.21c-5.912,0-10.721-4.809-10.721-10.721s4.809-10.721,10.721-10.721h7.815
			c4.475,0,8.116,3.641,8.116,8.117v5.21C269.326,80.2,272.69,83.563,276.841,83.563z'/>
	</g>
</g>
<g>
	<g>
		<path d='M424.329,148.29c-21.722,0-41.622,7.945-56.954,21.076l-37.201-31.001c8.545-13.527,13.497-29.538,13.497-46.686
			c0-48.342-39.329-87.671-87.671-87.671s-87.671,39.329-87.671,87.671c0,25.365,10.831,48.243,28.107,64.266l-61.262,54.455
			c-13.697-8.864-30.009-14.017-47.503-14.017C39.329,196.384,0,235.712,0,284.055s39.329,87.671,87.671,87.671
			c48.342,0,87.671-39.329,87.671-87.671c0-25.365-10.831-48.243-28.107-64.267l61.262-54.455
			c13.697,8.864,30.009,14.017,47.503,14.017c25.798,0,49.027-11.203,65.084-28.996l35.713,29.76
			c-12.573,15.177-20.139,34.644-20.139,55.846c0,48.342,39.329,87.671,87.671,87.671c48.342,0,87.671-39.329,87.671-87.671
			S472.671,148.29,424.329,148.29z M160.313,284.055c0,40.055-32.587,72.642-72.642,72.642s-72.642-32.587-72.642-72.642
			c0-40.055,32.587-72.642,72.642-72.642C127.726,211.413,160.313,244,160.313,284.055z M256,164.321
			c-40.055,0-72.642-32.587-72.642-72.642S215.945,19.037,256,19.037s72.642,32.587,72.642,72.642S296.055,164.321,256,164.321z
			 M424.329,308.603c-40.055,0-72.642-32.587-72.642-72.642c0-18.9,7.26-36.133,19.132-49.068c1.195-0.44,2.298-1.182,3.173-2.231
			c0.565-0.678,0.982-1.43,1.271-2.213c12.935-11.869,30.166-19.129,49.065-19.129c40.055,0,72.642,32.587,72.642,72.642
			C496.971,276.016,464.384,308.603,424.329,308.603z'/>
	</g>
</g>
<g>
	<g>
		<path d='M445.169,227.845c4.151,0,7.515-3.364,7.515-7.515v-5.21c0-11.984-9.157-21.87-20.841-23.03v-8.231
			c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v8.591c-11.857,2.299-20.841,12.756-20.841,25.275
			c0,14.199,11.552,25.75,25.75,25.75h5.209c5.912,0,10.721,4.809,10.721,10.721c0,5.912-4.809,10.721-10.721,10.721h-7.815
			c-4.475,0-8.116-3.641-8.116-8.117c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515
			c0,11.984,9.156,21.87,20.841,23.03v8.231c0,4.151,3.364,7.515,7.515,7.515c4.151,0,7.515-3.364,7.515-7.515v-8.591
			c11.857-2.299,20.841-12.756,20.841-25.275c0-14.199-11.552-25.75-25.75-25.75h-5.209c-5.912,0-10.721-4.809-10.721-10.721
			s4.809-10.721,10.721-10.721h7.815c4.475,0,8.116,3.641,8.116,8.117v5.21C437.655,224.481,441.018,227.845,445.169,227.845z'/>
	</g>
</g>
<g>
	<g>
		<path d='M159.812,396.775H95.687c-4.15,0-7.515,3.364-7.515,7.515v96.188c0,4.151,3.365,7.515,7.515,7.515h64.125
			c4.15,0,7.515-3.364,7.515-7.515V404.29C167.327,400.138,163.962,396.775,159.812,396.775z M152.297,492.963h-49.096v-81.159
			h49.096V492.963z'/>
	</g>
</g>
<g>
	<g>
		<path d='M472.423,396.775h-64.125c-4.151,0-7.515,3.364-7.515,7.515v96.188c0,4.151,3.364,7.515,7.515,7.515h64.125
			c4.151,0,7.515-3.364,7.515-7.515V404.29C479.937,400.138,476.574,396.775,472.423,396.775z M464.908,492.963h-49.096v-81.159
			h49.096V492.963z'/>
	</g>
</g>
<g>
	<g>
		<path d='M264.016,428.34c4.151,0,7.515-3.364,7.515-7.515V308.102c0-4.151-3.364-7.515-7.515-7.515H199.89
			c-4.15,0-7.515,3.364-7.515,7.515v192.376c0,4.151,3.365,7.515,7.515,7.515h64.125c4.151,0,7.515-3.364,7.515-7.515v-44.585
			c0-4.151-3.364-7.515-7.515-7.515c-4.151,0-7.515,3.364-7.515,7.515v37.07h-49.096V315.616h49.096v105.208
			C256.501,424.976,259.865,428.34,264.016,428.34z'/>
	</g>
</g>
<g>
	<g>
		<path d='M368.219,348.681h-64.125c-4.151,0-7.515,3.364-7.515,7.515v144.282c0,4.151,3.364,7.515,7.515,7.515h64.125
			c4.151,0,7.515-3.364,7.515-7.515V356.196C375.734,352.045,372.37,348.681,368.219,348.681z M360.705,492.963h-49.096V363.71
			h49.096V492.963z'/>
	</g>
</g></g>
</svg>
Thanks,
Mike L.

Helpful resources

Announcements
Better Together’ Contest Finalists Announced!

'Better Together’ Contest Finalists Announced!

Congrats to the finalists of our ‘Better Together’-themed T-shirt design contest! Click for the top entries.

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Join THE global Microsoft Power Platform event series

Attend for two days of expert-led learning and innovation on topics like AI and Analytics, powered by Dynamic Communities

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

thirdimage

Microsoft Business Applications Virtual Launch

Join us for the Microsoft Business Applications Virtual Launch Event on Thursday, April 2, 2020, at 8:00 AM PST.

thirdimage

Community Summit North America

Innovate, Collaborate, Grow - The top training and networking event across the globe for Microsoft Business Applications

Top Solution Authors
Top Kudoed Authors
Users online (9,485)