Incorrect shape rendering
shafqatjamil opened this issue · 3 comments
shafqatjamil commented
I have a SVG which is correctly rendering in https://www.rapidtables.com/web/tools/svg-viewer-editor.html but using this package in my react app its just display a tick in same color. Shape should be a plus sign within the circle
React Version: 17.0.2
inlinsvg version: 2.3.0
Following is the svg code
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M8.5,7.5 L11,7.5 C11.2761424,7.5 11.5,7.72385763 11.5,8 C11.5,8.27614237 11.2761424,8.5 11,8.5 L8.5,8.5 L8.5,11 C8.5,11.2761424 8.27614237,11.5 8,11.5 C7.72385763,11.5 7.5,11.2761424 7.5,11 L7.5,8.5 L5,8.5 C4.72385763,8.5 4.5,8.27614237 4.5,8 C4.5,7.72385763 4.72385763,7.5 5,7.5 L7.5,7.5 L7.5,5 C7.5,4.72385763 7.72385763,4.5 8,4.5 C8.27614237,4.5 8.5,4.72385763 8.5,5 L8.5,7.5 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z M8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 Z" id="path-1"></path>
</defs>
<g id="Design" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Add-a-New-Protocol---Screening" transform="translate(-657.000000, -940.000000)">
<g id="Group-8" transform="translate(657.000000, 936.000000)">
<g id="1.-Elements/Icons/16/Add" transform="translate(0.000000, 4.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Oval" fill="#753BBD" fill-rule="nonzero" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
gilbarbara commented
Please provide a https://codesandbox.io/ demo or similar.
shafqatjamil commented
I tried to reproduce but its working fine in sandbox. FYI I upgraded react version from 16 to 17 if it helps
gilbarbara commented
So, if it is working with a simple setup, it might be a problem with your app?
Anyway, without a reproduction, there's no way to know what is happening...