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

SVG Style Question

I have been playing with some SVG images outside of PowerApps to find a way to do things like hover and active.  Some to find out you can use CSS withing the SVG code, so I figured out the following which work fine in something like CodePen.  But when pasted into a image element inside of PowerApps I get nothing.  Thoughts??

<svg height='511pt' class='icon' viewBox='0 0 511.998 511' width='511pt' 
    xmlns='http://www.w3.org/2000/svg'>
    <style>
        .icon{ fill: black}
        .icon:hover{ fill: blue}
        .icon:active{ fill: green}
    </style>
    <path d='m58.960938 187.046875c1.460937 1.460937 3.378906 2.195313 5.296874 2.195313 1.917969 0 3.835938-.730469 5.300782-2.195313 2.925781-2.925781 2.925781-7.671875 0-10.597656l-18.195313-18.195313 18.195313-18.191406c2.925781-2.929688 2.925781-7.671875 0-10.597656-2.925782-2.925782-7.671875-2.925782-10.597656 0l-23.492188 23.492187c-1.40625 1.40625-2.195312 3.3125-2.195312 5.296875 0 1.988282.789062 3.894532 2.195312 5.300782zm0 0'/>
    <path d='m133.320312 158.253906-18.195312 18.195313c-2.925781 2.925781-2.925781 7.671875.003906 10.597656 1.460938 1.460937 3.378906 2.195313 5.296875 2.195313s3.835938-.734376 5.296875-2.195313l23.496094-23.496094c2.925781-2.925781 2.925781-7.671875 0-10.59375l-23.496094-23.496093c-2.925781-2.925782-7.667968-2.925782-10.59375 0-2.929687 2.929687-2.929687 7.671874 0 10.597656zm0 0'/>
    <path d='m81.171875 188.722656c.898437.351563 1.828125.519532 2.738281.519532 2.992188 0 5.816406-1.804688 6.976563-4.753907l18.457031-46.988281c1.515625-3.851562-.382812-8.199219-4.234375-9.714844-3.847656-1.511718-8.199219.382813-9.710937 4.234375l-18.460938 46.988281c-1.511719 3.851563.382812 8.203126 4.234375 9.714844zm0 0'/>
    <path d='m45.007812 233.203125h50.480469c4.136719 0 7.492188-3.355469 7.492188-7.496094 0-4.136719-3.355469-7.492187-7.492188-7.492187h-50.480469c-4.140624 0-7.492187 3.355468-7.492187 7.492187 0 4.140625 3.351563 7.496094 7.492187 7.496094zm0 0'/>
    <path d='m211.753906 218.214844h-88.75c-4.136718 0-7.492187 3.355468-7.492187 7.492187 0 4.140625 3.355469 7.496094 7.492187 7.496094h88.75c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492187-7.496094-7.492187zm0 0'/>
    <path d='m45.007812 264.808594h21.503907c4.136719 0 7.492187-3.355469 7.492187-7.496094 0-4.136719-3.355468-7.492188-7.492187-7.492188h-21.503907c-4.140624 0-7.492187 3.355469-7.492187 7.492188 0 4.140625 3.351563 7.496094 7.492187 7.496094zm0 0'/>
    <path d='m184.339844 249.820312c-4.140625 0-7.492188 3.355469-7.492188 7.492188 0 4.140625 3.351563 7.496094 7.492188 7.496094h13.09375c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492188-7.496094-7.492188zm0 0'/>
    <path d='m164.617188 257.3125c0-4.136719-3.355469-7.492188-7.492188-7.492188h-64.320312c-4.140626 0-7.492188 3.355469-7.492188 7.492188 0 4.140625 3.351562 7.496094 7.492188 7.496094h64.320312c4.136719 0 7.492188-3.355469 7.492188-7.496094zm0 0'/>
    <path d='m213.703125 257.3125c0 4.140625 3.355469 7.496094 7.492187 7.496094h24.527344c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492188-7.496094-7.492188h-24.527344c-4.136718 0-7.492187 3.355469-7.492187 7.492188zm0 0'/>
    <path d='m172.894531 164.265625h25.871094c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492187-7.496094-7.492187h-25.871094c-4.140625 0-7.496093 3.355468-7.496093 7.492187 0 4.140625 3.355468 7.496094 7.496093 7.496094zm0 0'/>
    <path d='m227.742188 164.265625h157.855468c4.140625 0 7.492188-3.355469 7.492188-7.496094 0-4.136719-3.351563-7.492187-7.492188-7.492187h-157.855468c-4.140626 0-7.496094 3.355468-7.496094 7.492187 0 4.140625 3.355468 7.496094 7.496094 7.496094zm0 0'/>
    <path d='m361.621094 182.246094h-63.945313c-4.136719 0-7.492187 3.355468-7.492187 7.496094 0 4.136718 3.355468 7.492187 7.492187 7.492187h63.945313c4.136718 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.355469-7.496094-7.492187-7.496094zm0 0'/>
    <path d='m273.699219 182.246094h-21.980469c-4.140625 0-7.492188 3.355468-7.492188 7.496094 0 4.136718 3.351563 7.492187 7.492188 7.492187h21.980469c4.140625 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.351562-7.496094-7.492187-7.496094zm0 0'/>
    <path d='m172.894531 197.234375h53.847657c4.136718 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.355469-7.496094-7.492187-7.496094h-53.847657c-4.140625 0-7.496093 3.355468-7.496093 7.496094 0 4.136718 3.355468 7.492187 7.496093 7.492187zm0 0'/>
    <path d='m157.21875 281.160156h-50.476562c-4.140626 0-7.496094 3.355469-7.496094 7.492188 0 4.136718 3.355468 7.492187 7.496094 7.492187h50.476562c4.136719 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.355469-7.492188-7.492188-7.492188zm0 0'/>
    <path d='m83.789062 281.160156h-38.78125c-4.140624 0-7.492187 3.355469-7.492187 7.492188 0 4.136718 3.351563 7.492187 7.492187 7.492187h38.78125c4.140626 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.351562-7.492188-7.492188-7.492188zm0 0'/>
    <path d='m248.722656 281.160156h-65.941406c-4.140625 0-7.492188 3.355469-7.492188 7.492188 0 4.136718 3.351563 7.492187 7.492188 7.492187h65.941406c4.136719 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.355469-7.492188-7.492188-7.492188zm0 0'/>
    <path d='m337.898438 242.667969h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492187 0 4.140625 3.355469 7.496094 7.492188 7.496094h36.058594c4.140624 0 7.492187-3.355469 7.492187-7.496094 0-4.136718-3.351563-7.492187-7.492187-7.492187zm0 0'/>
    <path d='m400.46875 257.65625h50.902344c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136718-3.355469-7.492187-7.496094-7.492187h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492187 0 4.140625 3.355469 7.496094 7.492188 7.496094zm0 0'/>
    <path d='m375.015625 242.667969h-11.664063c-4.140624 0-7.496093 3.355469-7.496093 7.492187 0 4.140625 3.355469 7.496094 7.496093 7.496094h11.664063c4.140625 0 7.492187-3.355469 7.492187-7.496094 0-4.136718-3.351562-7.492187-7.492187-7.492187zm0 0'/>
    <path d='m301.839844 339.3125h36.058594c4.140624 0 7.492187-3.351562 7.492187-7.492188 0-4.136718-3.351563-7.492187-7.492187-7.492187h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492187 0 4.140626 3.355469 7.492188 7.492188 7.492188zm0 0'/>
    <path d='m400.46875 339.3125h50.902344c4.140625 0 7.496094-3.351562 7.496094-7.492188 0-4.136718-3.355469-7.492187-7.496094-7.492187h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492187 0 4.140626 3.355469 7.492188 7.492188 7.492188zm0 0'/>
    <path d='m363.351562 339.3125h11.664063c4.140625 0 7.496094-3.351562 7.496094-7.492188 0-4.136718-3.355469-7.492187-7.496094-7.492187h-11.664063c-4.140624 0-7.492187 3.355469-7.492187 7.492187 0 4.140626 3.351563 7.492188 7.492187 7.492188zm0 0'/>
    <path d='m337.898438 405.988281h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492188s3.355469 7.492187 7.492188 7.492187h36.058594c4.140624 0 7.492187-3.355468 7.492187-7.492187s-3.351563-7.492188-7.492187-7.492188zm0 0'/>
    <path d='m451.371094 405.988281h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492188s3.351563 7.492187 7.492188 7.492187h50.902344c4.140625 0 7.496094-3.355468 7.496094-7.492187s-3.355469-7.492188-7.496094-7.492188zm0 0'/>
    <path d='m375.015625 405.988281h-11.664063c-4.140624 0-7.496093 3.355469-7.496093 7.492188s3.355469 7.492187 7.496093 7.492187h11.664063c4.140625 0 7.492187-3.355468 7.492187-7.492187s-3.351562-7.492188-7.492187-7.492188zm0 0'/>
    <path d='m479.023438.5h-446.042969c-18.183594 0-32.980469 14.792969-32.980469 32.980469v362.566406c0 18.183594 14.796875 32.976563 32.980469 32.976563h28.199219c4.136718 0 7.492187-3.351563 7.492187-7.492188 0-4.136719-3.355469-7.492188-7.492187-7.492188h-28.199219c-9.921875 0-17.992188-8.070312-17.992188-17.992187v-28.425781h272.996094v12.914062h-5.941406c-8.128907 0-14.738281 6.609375-14.738281 14.738282v18.765624h-160.566407c-4.136719 0-7.492187 3.355469-7.492187 7.492188 0 4.140625 3.355468 7.492188 7.492187 7.492188h72.046875v26.875h-22.625c-15.09375 0-27.371094 12.28125-27.371094 27.371093v16.1875c0 6.886719 5.601563 12.488281 12.488282 12.488281h228.875c6.886718 0 12.488281-5.601562 12.488281-12.488281v-16.1875c0-15.089843-12.277344-27.371093-27.371094-27.371093h-22.625v-9.472657h138.527344c8.125 0 14.734375-6.609375 14.734375-14.738281v-3.527344c14.605469-3.390625 25.523438-16.496094 25.523438-32.113281l.566406-362.570313c.003906-18.183593-14.789063-32.976562-32.972656-32.976562zm-196.730469 349.28125v-35.917969h188.628906v35.917969zm20.675781-50.90625v-15.765625h147.273438v15.765625zm147.273438 65.890625v15.769531h-147.273438v-15.769531zm-256.472657 64.257813h73.535157v2.667968c0 8.125 6.609374 14.734375 14.738281 14.734375h35.617187v9.472657h-123.890625zm161.503907 41.863281c6.828124 0 12.382812 5.554687 12.382812 12.382812v13.691407h-223.882812v-13.691407c0-6.828125 5.558593-12.382812 12.386718-12.382812zm115.648437-39.449219h-188.628906v-35.914062h188.628906zm25.523437-35.390625c0 7.257813-4.328124 13.511719-10.535156 16.351563v-17.128907c0-8.125-6.613281-14.734375-14.738281-14.734375h-5.941406v-12.914062h31.214843zm0-43.410156h-10.78125c.152344-.847657.246094-39.023438.246094-39.023438 0-8.128906-6.613281-14.738281-14.738281-14.738281h-5.941406v-15.765625h5.941406c8.125 0 14.738281-6.613281 14.738281-14.738281v-36.417969c0-8.125-6.613281-14.738281-14.738281-14.738281h-42.324219c-4.140625 0-7.492187 3.355468-7.492187 7.496094 0 4.136718 3.351562 7.492187 7.492187 7.492187h42.074219v35.917969h-188.628906v-35.917969h99.929687c4.140625 0 7.492188-3.355469 7.492188-7.492187 0-4.140626-3.351563-7.496094-7.492188-7.496094h-100.179687c-8.128907 0-14.738281 6.613281-14.738281 14.738281v36.417969c0 8.125 6.609374 14.738281 14.738281 14.738281h5.941406v15.765625h-5.941406c-8.128907 0-14.738281 6.613281-14.738281 14.738281 0 0 .09375 38.175781.246093 39.023438h-252.5625v-250.207031h481.457031zm0-265.195313h-480.90625v-53.964844c0-9.917968 8.070313-17.988281 17.992188-17.988281h444.921875c9.921875 0 17.992187 8.070313 17.992187 17.992188zm0 0'/>
    <path d='m55.261719 29.261719c-12.125 0-21.988281 9.863281-21.988281 21.988281s9.863281 21.992188 21.988281 21.992188 21.992187-9.867188 21.992187-21.992188-9.867187-21.988281-21.992187-21.988281zm0 28.992187c-3.859375 0-7.003907-3.140625-7.003907-7.003906 0-3.859375 3.144532-7.003906 7.003907-7.003906 3.863281 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.140625 7.003906-7.003906 7.003906zm0 0'/>
    <path d='m111.25 29.261719c-12.125 0-21.992188 9.863281-21.992188 21.988281s9.867188 21.992188 21.992188 21.992188 21.988281-9.867188 21.988281-21.992188-9.867187-21.988281-21.988281-21.988281zm0 28.992187c-3.863281 0-7.003906-3.140625-7.003906-7.003906 0-3.859375 3.140625-7.003906 7.003906-7.003906 3.859375 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.144531 7.003906-7.003906 7.003906zm0 0'/>
    <path d='m167.234375 29.261719c-12.125 0-21.988281 9.863281-21.988281 21.988281s9.863281 21.992188 21.988281 21.992188 21.992187-9.867188 21.992187-21.992188-9.867187-21.988281-21.992187-21.988281zm0 28.992187c-3.859375 0-7.003906-3.140625-7.003906-7.003906 0-3.859375 3.144531-7.003906 7.003906-7.003906 3.863281 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.140625 7.003906-7.003906 7.003906zm0 0'/>
</svg>

 

Thanks,
Mike L.
2 REPLIES 2
KickingApps
Level 8

Re: SVG Style Question

Here you go. You need the "data&colon;image......"

This works; I tested in my app.

"data&colon;image/svg+xml," & EncodeUrl(
"
<svg height='511pt' class='icon' viewBox='0 0 511.998 511' width='511pt'
xmlns='http://www.w3.org/2000/svg'>
<style>
.icon{ fill: black}
.icon:hover{ fill: blue}
.icon:active{ fill: green}
</style>
<path d='m58.960938 187.046875c1.460937 1.460937 3.378906 2.195313 5.296874 2.195313 1.917969 0 3.835938-.730469 5.300782-2.195313 2.925781-2.925781 2.925781-7.671875 0-10.597656l-18.195313-18.195313 18.195313-18.191406c2.925781-2.929688 2.925781-7.671875 0-10.597656-2.925782-2.925782-7.671875-2.925782-10.597656 0l-23.492188 23.492187c-1.40625 1.40625-2.195312 3.3125-2.195312 5.296875 0 1.988282.789062 3.894532 2.195312 5.300782zm0 0'/>
<path d='m133.320312 158.253906-18.195312 18.195313c-2.925781 2.925781-2.925781 7.671875.003906 10.597656 1.460938 1.460937 3.378906 2.195313 5.296875 2.195313s3.835938-.734376 5.296875-2.195313l23.496094-23.496094c2.925781-2.925781 2.925781-7.671875 0-10.59375l-23.496094-23.496093c-2.925781-2.925782-7.667968-2.925782-10.59375 0-2.929687 2.929687-2.929687 7.671874 0 10.597656zm0 0'/>
<path d='m81.171875 188.722656c.898437.351563 1.828125.519532 2.738281.519532 2.992188 0 5.816406-1.804688 6.976563-4.753907l18.457031-46.988281c1.515625-3.851562-.382812-8.199219-4.234375-9.714844-3.847656-1.511718-8.199219.382813-9.710937 4.234375l-18.460938 46.988281c-1.511719 3.851563.382812 8.203126 4.234375 9.714844zm0 0'/>
<path d='m45.007812 233.203125h50.480469c4.136719 0 7.492188-3.355469 7.492188-7.496094 0-4.136719-3.355469-7.492187-7.492188-7.492187h-50.480469c-4.140624 0-7.492187 3.355468-7.492187 7.492187 0 4.140625 3.351563 7.496094 7.492187 7.496094zm0 0'/>
<path d='m211.753906 218.214844h-88.75c-4.136718 0-7.492187 3.355468-7.492187 7.492187 0 4.140625 3.355469 7.496094 7.492187 7.496094h88.75c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492187-7.496094-7.492187zm0 0'/>
<path d='m45.007812 264.808594h21.503907c4.136719 0 7.492187-3.355469 7.492187-7.496094 0-4.136719-3.355468-7.492188-7.492187-7.492188h-21.503907c-4.140624 0-7.492187 3.355469-7.492187 7.492188 0 4.140625 3.351563 7.496094 7.492187 7.496094zm0 0'/>
<path d='m184.339844 249.820312c-4.140625 0-7.492188 3.355469-7.492188 7.492188 0 4.140625 3.351563 7.496094 7.492188 7.496094h13.09375c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492188-7.496094-7.492188zm0 0'/>
<path d='m164.617188 257.3125c0-4.136719-3.355469-7.492188-7.492188-7.492188h-64.320312c-4.140626 0-7.492188 3.355469-7.492188 7.492188 0 4.140625 3.351562 7.496094 7.492188 7.496094h64.320312c4.136719 0 7.492188-3.355469 7.492188-7.496094zm0 0'/>
<path d='m213.703125 257.3125c0 4.140625 3.355469 7.496094 7.492187 7.496094h24.527344c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492188-7.496094-7.492188h-24.527344c-4.136718 0-7.492187 3.355469-7.492187 7.492188zm0 0'/>
<path d='m172.894531 164.265625h25.871094c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136719-3.355469-7.492187-7.496094-7.492187h-25.871094c-4.140625 0-7.496093 3.355468-7.496093 7.492187 0 4.140625 3.355468 7.496094 7.496093 7.496094zm0 0'/>
<path d='m227.742188 164.265625h157.855468c4.140625 0 7.492188-3.355469 7.492188-7.496094 0-4.136719-3.351563-7.492187-7.492188-7.492187h-157.855468c-4.140626 0-7.496094 3.355468-7.496094 7.492187 0 4.140625 3.355468 7.496094 7.496094 7.496094zm0 0'/>
<path d='m361.621094 182.246094h-63.945313c-4.136719 0-7.492187 3.355468-7.492187 7.496094 0 4.136718 3.355468 7.492187 7.492187 7.492187h63.945313c4.136718 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.355469-7.496094-7.492187-7.496094zm0 0'/>
<path d='m273.699219 182.246094h-21.980469c-4.140625 0-7.492188 3.355468-7.492188 7.496094 0 4.136718 3.351563 7.492187 7.492188 7.492187h21.980469c4.140625 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.351562-7.496094-7.492187-7.496094zm0 0'/>
<path d='m172.894531 197.234375h53.847657c4.136718 0 7.492187-3.355469 7.492187-7.492187 0-4.140626-3.355469-7.496094-7.492187-7.496094h-53.847657c-4.140625 0-7.496093 3.355468-7.496093 7.496094 0 4.136718 3.355468 7.492187 7.496093 7.492187zm0 0'/>
<path d='m157.21875 281.160156h-50.476562c-4.140626 0-7.496094 3.355469-7.496094 7.492188 0 4.136718 3.355468 7.492187 7.496094 7.492187h50.476562c4.136719 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.355469-7.492188-7.492188-7.492188zm0 0'/>
<path d='m83.789062 281.160156h-38.78125c-4.140624 0-7.492187 3.355469-7.492187 7.492188 0 4.136718 3.351563 7.492187 7.492187 7.492187h38.78125c4.140626 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.351562-7.492188-7.492188-7.492188zm0 0'/>
<path d='m248.722656 281.160156h-65.941406c-4.140625 0-7.492188 3.355469-7.492188 7.492188 0 4.136718 3.351563 7.492187 7.492188 7.492187h65.941406c4.136719 0 7.492188-3.355469 7.492188-7.492187 0-4.136719-3.355469-7.492188-7.492188-7.492188zm0 0'/>
<path d='m337.898438 242.667969h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492187 0 4.140625 3.355469 7.496094 7.492188 7.496094h36.058594c4.140624 0 7.492187-3.355469 7.492187-7.496094 0-4.136718-3.351563-7.492187-7.492187-7.492187zm0 0'/>
<path d='m400.46875 257.65625h50.902344c4.140625 0 7.496094-3.355469 7.496094-7.496094 0-4.136718-3.355469-7.492187-7.496094-7.492187h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492187 0 4.140625 3.355469 7.496094 7.492188 7.496094zm0 0'/>
<path d='m375.015625 242.667969h-11.664063c-4.140624 0-7.496093 3.355469-7.496093 7.492187 0 4.140625 3.355469 7.496094 7.496093 7.496094h11.664063c4.140625 0 7.492187-3.355469 7.492187-7.496094 0-4.136718-3.351562-7.492187-7.492187-7.492187zm0 0'/>
<path d='m301.839844 339.3125h36.058594c4.140624 0 7.492187-3.351562 7.492187-7.492188 0-4.136718-3.351563-7.492187-7.492187-7.492187h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492187 0 4.140626 3.355469 7.492188 7.492188 7.492188zm0 0'/>
<path d='m400.46875 339.3125h50.902344c4.140625 0 7.496094-3.351562 7.496094-7.492188 0-4.136718-3.355469-7.492187-7.496094-7.492187h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492187 0 4.140626 3.355469 7.492188 7.492188 7.492188zm0 0'/>
<path d='m363.351562 339.3125h11.664063c4.140625 0 7.496094-3.351562 7.496094-7.492188 0-4.136718-3.355469-7.492187-7.496094-7.492187h-11.664063c-4.140624 0-7.492187 3.355469-7.492187 7.492187 0 4.140626 3.351563 7.492188 7.492187 7.492188zm0 0'/>
<path d='m337.898438 405.988281h-36.058594c-4.136719 0-7.492188 3.355469-7.492188 7.492188s3.355469 7.492187 7.492188 7.492187h36.058594c4.140624 0 7.492187-3.355468 7.492187-7.492187s-3.351563-7.492188-7.492187-7.492188zm0 0'/>
<path d='m451.371094 405.988281h-50.902344c-4.140625 0-7.492188 3.355469-7.492188 7.492188s3.351563 7.492187 7.492188 7.492187h50.902344c4.140625 0 7.496094-3.355468 7.496094-7.492187s-3.355469-7.492188-7.496094-7.492188zm0 0'/>
<path d='m375.015625 405.988281h-11.664063c-4.140624 0-7.496093 3.355469-7.496093 7.492188s3.355469 7.492187 7.496093 7.492187h11.664063c4.140625 0 7.492187-3.355468 7.492187-7.492187s-3.351562-7.492188-7.492187-7.492188zm0 0'/>
<path d='m479.023438.5h-446.042969c-18.183594 0-32.980469 14.792969-32.980469 32.980469v362.566406c0 18.183594 14.796875 32.976563 32.980469 32.976563h28.199219c4.136718 0 7.492187-3.351563 7.492187-7.492188 0-4.136719-3.355469-7.492188-7.492187-7.492188h-28.199219c-9.921875 0-17.992188-8.070312-17.992188-17.992187v-28.425781h272.996094v12.914062h-5.941406c-8.128907 0-14.738281 6.609375-14.738281 14.738282v18.765624h-160.566407c-4.136719 0-7.492187 3.355469-7.492187 7.492188 0 4.140625 3.355468 7.492188 7.492187 7.492188h72.046875v26.875h-22.625c-15.09375 0-27.371094 12.28125-27.371094 27.371093v16.1875c0 6.886719 5.601563 12.488281 12.488282 12.488281h228.875c6.886718 0 12.488281-5.601562 12.488281-12.488281v-16.1875c0-15.089843-12.277344-27.371093-27.371094-27.371093h-22.625v-9.472657h138.527344c8.125 0 14.734375-6.609375 14.734375-14.738281v-3.527344c14.605469-3.390625 25.523438-16.496094 25.523438-32.113281l.566406-362.570313c.003906-18.183593-14.789063-32.976562-32.972656-32.976562zm-196.730469 349.28125v-35.917969h188.628906v35.917969zm20.675781-50.90625v-15.765625h147.273438v15.765625zm147.273438 65.890625v15.769531h-147.273438v-15.769531zm-256.472657 64.257813h73.535157v2.667968c0 8.125 6.609374 14.734375 14.738281 14.734375h35.617187v9.472657h-123.890625zm161.503907 41.863281c6.828124 0 12.382812 5.554687 12.382812 12.382812v13.691407h-223.882812v-13.691407c0-6.828125 5.558593-12.382812 12.386718-12.382812zm115.648437-39.449219h-188.628906v-35.914062h188.628906zm25.523437-35.390625c0 7.257813-4.328124 13.511719-10.535156 16.351563v-17.128907c0-8.125-6.613281-14.734375-14.738281-14.734375h-5.941406v-12.914062h31.214843zm0-43.410156h-10.78125c.152344-.847657.246094-39.023438.246094-39.023438 0-8.128906-6.613281-14.738281-14.738281-14.738281h-5.941406v-15.765625h5.941406c8.125 0 14.738281-6.613281 14.738281-14.738281v-36.417969c0-8.125-6.613281-14.738281-14.738281-14.738281h-42.324219c-4.140625 0-7.492187 3.355468-7.492187 7.496094 0 4.136718 3.351562 7.492187 7.492187 7.492187h42.074219v35.917969h-188.628906v-35.917969h99.929687c4.140625 0 7.492188-3.355469 7.492188-7.492187 0-4.140626-3.351563-7.496094-7.492188-7.496094h-100.179687c-8.128907 0-14.738281 6.613281-14.738281 14.738281v36.417969c0 8.125 6.609374 14.738281 14.738281 14.738281h5.941406v15.765625h-5.941406c-8.128907 0-14.738281 6.613281-14.738281 14.738281 0 0 .09375 38.175781.246093 39.023438h-252.5625v-250.207031h481.457031zm0-265.195313h-480.90625v-53.964844c0-9.917968 8.070313-17.988281 17.992188-17.988281h444.921875c9.921875 0 17.992187 8.070313 17.992187 17.992188zm0 0'/>
<path d='m55.261719 29.261719c-12.125 0-21.988281 9.863281-21.988281 21.988281s9.863281 21.992188 21.988281 21.992188 21.992187-9.867188 21.992187-21.992188-9.867187-21.988281-21.992187-21.988281zm0 28.992187c-3.859375 0-7.003907-3.140625-7.003907-7.003906 0-3.859375 3.144532-7.003906 7.003907-7.003906 3.863281 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.140625 7.003906-7.003906 7.003906zm0 0'/>
<path d='m111.25 29.261719c-12.125 0-21.992188 9.863281-21.992188 21.988281s9.867188 21.992188 21.992188 21.992188 21.988281-9.867188 21.988281-21.992188-9.867187-21.988281-21.988281-21.988281zm0 28.992187c-3.863281 0-7.003906-3.140625-7.003906-7.003906 0-3.859375 3.140625-7.003906 7.003906-7.003906 3.859375 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.144531 7.003906-7.003906 7.003906zm0 0'/>
<path d='m167.234375 29.261719c-12.125 0-21.988281 9.863281-21.988281 21.988281s9.863281 21.992188 21.988281 21.992188 21.992187-9.867188 21.992187-21.992188-9.867187-21.988281-21.992187-21.988281zm0 28.992187c-3.859375 0-7.003906-3.140625-7.003906-7.003906 0-3.859375 3.144531-7.003906 7.003906-7.003906 3.863281 0 7.003906 3.144531 7.003906 7.003906 0 3.863281-3.140625 7.003906-7.003906 7.003906zm0 0'/>
</svg>
"
)

Highlighted
MikeLockwood
Level 8

Re: SVG Style Question

@KickingApps ,

 

You are correct that I need the Data URI component around the SVG code which I actually have.  My point was that the hover effects do not work, even with putting the data URI around it.  I supplied the base SVG code so that you could put that directly in the browser to see that it works, it is back by default and when you mouse over it changes to blue and clicking makes it green.  Taking that same SVG code that is functional and surrounding it with the "data&colon;image/svg+xml," & EncodeUrl(" breaks functioning code.  So the question is has anyone else seen this and is there a way to get around what seems to be the PowerApps player not truely rendering SVG properly?

Thanks,
Mike L.

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

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

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (6,217)