I have a buggy SVG


#1

Chrome renders correctly, but not Projucer.

I’m posting this because I feel it’s quite a simple dial.

It looks like the bitmap is not being masked out by the dial shape correctly.
I would post the svg file but it’s a type that is banned from the forum.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
    <g id="Knob1">
        <clipPath id="_clip1">
            <circle cx="30" cy="30" r="30"/>
        </clipPath>
        <g clip-path="url(#_clip1)">
            <use xlink:href="#_Image2" x="0" y="0" width="60px" height="60px"/>
        </g>
        <circle cx="30" cy="30" r="30" style="fill:url(#_Radial3);"/>
        <rect x="28.594" y="1.875" width="2.813" height="15" style="fill:white;"/>
    </g>
    <defs>
        <image id="_Image2" width="60px" height="60px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAA8ADwDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDxaKSv0Q+RL1vJ0qkI07V+lUiWa9mc1aJNm0XjNWiWWKoQGgQ2qsK54+Mqa4DrLNvNzTEa1lLnHNWiWb+nHditEQzoLcYjFaIhkhpiGE4rRRJbGFq1UCOY8paOvKsdxGUIORSGWbO4KOA1NMTR1ugyCUqAa2iZs6kfKoHpWyRmRvIB3reFNsylOxC8o9a6YUWYyqERmGetbqiZOqcIbfPavn7HrXGm0J7UuULjG092+6po5R8xreHjNpk32i/BS0XrKexPQY784rWlBuSRnUkkrnQya3auP3T5FfQ0MrbV3JHk1cctkiB9SVuhr0IZcl1OSWLbI2vc966I4JIxeJY37X71p9VRPt2VEtc9q+CsfU3LUFhuPSqURXNK3sIYRvkAPtVqJLZgeNJvOsWgXhccAVM2OJx+n3roApY8V34XFyirXOWvQTdzXgvCR1r2aeKbPOnQsWkuc966o4i5g6RILj3rVViPZnVwWvtXxSR9HctqqRLx1qrWEVL2bCnmkxo5PXX3q1ZyLRxsmY7hh71MJWY5K6LlvMeOa9GlVOScC7FN713QqnNKmWBNxXQqpi4HpRIUYFeAeqV5pOKkDLvZODzSZRzupnINZspHLaguJN1QWMifFbwkZSiW4pK64TOeUSwsnFdKmYuJ6lITXmnYU7gmpGjLvCcGkxow77nNQykc/qAHNQy0UUNVETLMZNdMGYSJ1JxXQmZNH//Z"/>
        <radialGradient id="_Radial3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(31,0,0,31,30,30)"><stop offset="0" style="stop-color:black;stop-opacity:0"/><stop offset="0.58" style="stop-color:black;stop-opacity:0.121569"/><stop offset="0.8" style="stop-color:black;stop-opacity:0.384314"/><stop offset="1" style="stop-color:black;stop-opacity:0.643137"/></radialGradient>
    </defs>
</svg>