search

BigBadaboom / androidsvg

SVG rendering library for Android
http://bigbadaboom.github.io/androidsvg/
Apache License 2.0
1.2k stars 227 forks source link

SVG error loading - Rect cannot be cast to ClipPath #254

Closed BiancaTud closed 2 years ago

BiancaTud commented 2 years ago

Describe the bug Some svg files are not rendered correctly on android devices using coil library (v2.0.0 and v2.1.0). Same svg files render fine on iOS and browsers The error thrown is java.lang.ClassCastException: com.caverock.androidsvg.SVG$Rect cannot be cast to com.caverock.androidsvg.SVG$ClipPath

Expected behavior SVG loads correctly

Stack traces image

SVG svgviewer-output

image 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="350" viewBox="0,0,350,350"><defs><clipPath id="clip-1"><rect x="0" y="0" width="350" height="350" id="clip-2" fill="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray=""/></clipPath><clipPath id="clip-2"><rect x="0" y="0" width="350" height="350" fill="none" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray=""/></clipPath></defs><g clip-path="url(#clip-2)" fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="none" stroke-linejoin="none" stroke-miterlimit="10" stroke-dasharray="none" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><g id="goal" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" visibility="hidden"><path d="M204.76621,152.12954c0,-4.41828 3.58172,-8 8,-8c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8z" fill-opacity="0.5" fill="#252525" stroke="none" stroke-dasharray=""/><path d="M211.16621,152.12954c0,-0.88366 0.71634,-1.6 1.6,-1.6c0.88366,0 1.6,0.71634 1.6,1.6c0,0.88366 -0.71634,1.6 -1.6,1.6c-0.88366,0 -1.6,-0.71634 -1.6,-1.6z" fill="none" stroke-opacity="0.5" stroke="#ffffff" stroke-dasharray="1"/><path d="M208.32177,152.12954c0,-2.4546 1.98985,-4.44444 4.44444,-4.44444c2.4546,0 4.44444,1.98985 4.44444,4.44444c0,2.4546 -1.98985,4.44444 -4.44444,4.44444c-2.4546,0 -4.44444,-1.98985 -4.44444,-4.44444z" fill="none" stroke="#ffffff" stroke-dasharray="1"/><path d="M196.76621,152.12954c0,-8.83656 7.16344,-16 16,-16c8.83656,0 16,7.16344 16,16c0,8.83656 -7.16344,16 -16,16c-8.83656,0 -16,-7.16344 -16,-16z" fill-opacity="0.00001" fill="#000000" stroke="none" stroke-dasharray=""/></g><g id="start" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="" visibility="hidden"><path d="M119.69403,150.38369c0,-4.41828 3.58172,-8 8,-8c4.41828,0 8,3.58172 8,8c0,4.41828 -3.58172,8 -8,8c-4.41828,0 -8,-3.58172 -8,-8z" fill-opacity="0.1" fill="#ffffff"/><path d="M123.69403,150.38369c0,-2.20914 1.79086,-4 4,-4c2.20914,0 4,1.79086 4,4c0,2.20914 -1.79086,4 -4,4c-2.20914,0 -4,-1.79086 -4,-4z" fill="#ffffff"/><path d="M111.69403,150.38369c0,-8.83656 7.16344,-16 16,-16c8.83656,0 16,7.16344 16,16c0,8.83656 -7.16344,16 -16,16c-8.83656,0 -16,-7.16344 -16,-16z" fill-opacity="0.00001" fill="#000000"/></g><path d="M169.05168,157.36705c2.56827,0 -3.6893,38.90424 -4.12454,42.77301c-0.3073,2.73155 -6.86398,7.70438 -4.18066,7.10805" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M111.63737,219.61021c0.62815,-2.49965 2.98513,0.44073 4.38449,1.2305c17.29576,9.7614 37.41116,17.21976 57.16567,20.06536c35.66405,5.13734 39.71271,-22.38378 65.39214,-36.65083" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M90.65733,97.88387c-3.45687,-6.40174 -8.8082,-31.14963 1.09427,-34.29325c7.06142,-2.24171 14.13081,28.00739 22.22202,19.01717c4.19892,-4.66546 17.55996,-33.16787 24.21415,-32.298c5.15062,0.67332 1.06257,15.90176 7.54763,17.58308c8.58577,2.22596 18.02412,-22.63538 26.54297,-25.68875c4.76349,-1.70735 0.99619,25.07404 13.60439,23.72889c7.26581,-0.77518 40.33576,-23.54889 44.36366,-20.79838c2.65759,1.81477 -6.38693,12.36759 -3.70367,15.77489c2.1996,2.79313 15.40613,-3.32444 17.97281,-3.97782c1.81826,-0.46286 9.62487,-3.91541 10.33782,-0.13737c1.05683,5.60029 -10.33708,17.60678 -5.3591,22.44648c3.34705,3.25407 23.5083,-4.66227 23.90551,-3.11757c1.26945,4.93679 -5.39069,10.25828 -3.42309,15.21374c2.03331,5.12096 11.47747,0.92804 12.85061,4.55164c3.18408,8.40251 3.78816,21.47266 7.04258,31.17568" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M176.03646,116.71396c0.99199,0 -1.88756,-7.22028 -2.07751,-7.61823c-5.53848,-11.60364 -32.92566,-31.7264 -33.35819,-43.26047" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M177.58878,115.21753c-4.173,-7.33014 11.05286,-41.89781 19.01596,-46.5141" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M185.3815,117.27887c2.01467,-15.80389 28.35353,-33.27134 41.46988,-39.97095" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M201.62545,118.85043c14.70048,-10.47992 28.11806,-22.67235 43.18311,-32.93803" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M101.51008,189.29093c-0.23443,-0.18635 -0.6389,-0.12323 -0.47124,0.24942" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M119.44495,200.01537c0.31505,0.35004 0.66834,0.57443 0.95398,0.99762" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M137.05057,202.49289c0.39613,0.09225 0.70606,0.37642 1.08108,0.51535" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M149.94987,206.12579c0.39297,0 0.73931,-0.12469 1.14463,-0.12469" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M129.62429,183.67931c-0.07684,-0.06109 -0.14432,-0.12469 -0.24677,-0.12469" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M193.09917,207.12343c-0.33448,0 -0.2634,0.20859 -0.1981,0.4988" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M207.42774,200.40599c0.21925,-0.27216 0.52092,-0.31768 0.84917,-0.39062" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M253.97038,171.19252c-0.46788,1.53923 -0.89327,3.00449 -1.13719,4.63052" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M182.56082,189.29093c0.08225,0.0807 0.16226,0.16377 0.23933,0.24942" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M249.67917,230.56753c-2.96532,1.53435 -5.50873,5.94841 -7.90088,7.98098" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M225.06647,249.89644c-3.51687,0 -6.38239,2.07296 -9.49445,3.4917" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M189.42524,262.97371c-2.43598,0.10153 -4.91632,0.26593 -7.35459,0.26593" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M155.85288,258.00212c-0.74055,-0.17163 -1.40631,-0.37411 -2.17704,-0.37411" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M135.31434,245.92252c-1.08263,-0.35446 -2.19605,-0.6093 -3.29936,-0.88949" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M113.66498,241.04257c-0.29908,-0.08309 -0.57044,-0.22344 -0.84174,-0.37411" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M100.31676,226.61009c-0.91745,-3.17721 -2.76027,-5.96688 -3.71111,-9.13635" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M235.6888,128.92124c-1.91348,-3.54849 -3.77313,-6.751 -3.00133,-8.46619" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M232.64622,121.34448c-7.89664,-8.76974 -61.28234,29.14194 -31.10325,48.86694c16.28913,10.64654 28.0833,-6.87402 34.23998,-21.62336" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M111.68816,159.71488c3.03403,6.20487 9.05819,10.53378 17.33391,10.05763c27.97246,-1.60942 38.14938,-46.91992 15.45071,-42.33411" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M286.926,176.606c0,61.227 -50.098,110.885 -111.926,110.885c-61.828,0 -111.926,-49.658 -111.926,-110.885c0,-61.228 50.098,-110.8858 111.926,-110.8858c61.828,0 111.926,49.6578 111.926,110.8858z" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="miter" stroke-dasharray=""/><path d="M144.2145,122.69969c-16.47979,0 -26.51547,6.47212 -31.31676,14.61847" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M161.9641,275.41195c2.39179,15.94526 -30.74459,71.58805 -44.97818,71.58805" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M211.38917,277.61626c-6.1281,13.61799 18.34757,69.38374 31.69681,69.38374" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M166.25948,246.8439c0.62463,-0.21192 1.53681,-1.36286 2.0643,-1.80747" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M171.20146,238.12997c-3.11164,6.91466 -5.15783,25.74672 4.31652,15.21974c3.10026,-3.44471 11.18026,-14.69333 8.97837,-10.61543" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M190.29402,243.90233c2.29008,-4.20986 7.72225,8.19747 10.05836,8.74396c3.42701,0.80168 7.72638,-12.45533 8.83449,-14.64422" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M174.6259,242.15875c-7.05722,11.99231 -16.65631,8.59051 -18.84882,-5.05194" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M155.02888,230.83984c-4.51842,-10.04143 16.28159,-18.93924 26.64734,-0.51159" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/><path d="M187.43159,230.08944c3.70126,-18.63401 26.38786,-10.85706 34.07177,-2.31912" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray=""/></g></svg>
BigBadaboom commented 2 years ago

The main problem here is that you have an error in your SVG file. You have two elements with id="#clip-2". One is a <rect> and one is a <clipPath>.

My code was dereferencing the first match - the rectangle. Unfortunately I wasn't properly handling the case where the element the clip-path references is not a <clipPath>. The spec says if that happens, no clip should be applied to the element. I was just failing and not rendering the element at all. That is now fixed.

This fix will be in release version 1.5.