firefox - Inline SVG not rendering in Safari -
i've got svg of logo made in illustrator , optimized via svgou. i'm using gif fill. works without issue in chrome. had hiccup in firefox, found fix after figuring out firefox bit more picky chrome when defining svg attributes. firefox still acts strangley after scrolling. gif stops. problem safari. inline svg doesn't show up. checking caniuse, supported.
i tried adding
<meta http-equiv="content-type" content="application/xhtml+xml">
to head of index.html file. no luck. dev server running apache , local nodejs. before playing mime types there wanted see if else had working solution.
here's inline svg code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" id="qflogosvg" viewbox="-146 372.5 302.1 49.5"> <style> .qfsvg { width: 100%; fill: url("#qfpattern") none; stroke: none; } </style> <pattern id="qfpattern" patternunits="userspaceonuse" height="100%" width="100%" x="1071px" y="174px" preserveaspectratio="xmidymid slice" viewbox="0 0 1 1"> <image xlink:href="https://s3.amazonaws.com/quickframe-static/img/logoanimation.gif" width="1" height="1" id="qfimg"/> </pattern> <path class="qfsvg" <path d="m15.1 394.7h9.2v-3.3h5.9v-9.3c0-1.9.3-3.4.8-4.6.6-1.2 1.2-2.2 2.1-2.9.8-.7 1.7-1.3 2.8-1.6 1-.3 2-.5 2.9-.5 1.7 0 3.2.2 4.3.7l-.8 3.3c-.8-.4-1.9-.6-3.3-.6-3.3 0-5 2.5-5 7.6v8h6.7v3.3h-6.7v420h-3.7l-.1-25.3zm31.3 399.4c0-.5 0-1.2-.1-1.9 0-.8-.1-1.5-.1-2.3 0-.8-.1-1.5-.1-2.2s-.1-1.2-.1-1.6h3.7c0 1.1.1 2.1.1 3.1s.1 1.6.2 1.9c.9-1.7 2.2-3.1 3.7-4.1 1.5-1.1 3.3-1.6 5.4-1.6.4 0 .7 0 1.1.1.4.1.7.1 1.1.2l-.4 3.6c-.5-.2-1-.2-1.4-.2-1.6 0-3 .3-4.2.8s-2.1 1.2-2.9 2.1c-.8.9-1.3 2-1.7 3.2s-.6 2.5-.6 3.9v420h-3.7v-20.6zm71.3 407.9v3.8c0 1.1.1 2.1.1 3.1 0 .9.1 1.8.2 2.7.1.8.2 1.6.3 2.5h-3.5c-.2-1.4-.4-2.9-.4-4.6h-.1c-1.1 1.9-2.4 3.2-4 4.1s-3.6 1.3-6 1.3c-1.2 0-2.5-.2-3.7-.5-1.2-.3-2.3-.8-3.2-1.5-1-.7-1.7-1.6-2.3-2.6-.6-1.1-.9-2.4-.9-3.9 0-2.2.6-3.9 1.7-5.2 1.1-1.3 2.5-2.2 4.1-2.9 1.6-.6 3.4-1 5.2-1.2s3.5-.3 4.9-.3h68v401c0-2.5-.8-4.2-2.3-5.3-1.5-1.1-3.4-1.6-5.8-1.6-3.3 0-6.2 1.1-8.7 3.2l-2.2-2.5c1.4-1.3 3.1-2.3 5.1-3 2-.7 4-1 5.8-1 3.5 0 6.2.8 8.3 2.4 2.1 1.6 3.1 4.2 3.1 7.9v6.8zm-7.4-2.3c-1.6 0-3.1.1-4.6.3-1.5.2-2.8.6-4 1-1.2.5-2.1 1.2-2.8 2-.7.8-1.1 1.9-1.1 3.1 0 .9.2 1.6.6 2.3.4.7.9 1.2 1.5 1.7.6.4 1.3.8 2.1 1s1.5.3 2.3.3c2 0 3.6-.3 4.9-.9 1.3-.6 2.3-1.3 3.1-2.3.8-.9 1.3-2 1.6-3.1.3-1.2.4-2.4.4-3.5v-1.9h-4zm76.7 399.4c0-.5 0-1.2-.1-1.9 0-.8-.1-1.5-.1-2.3 0-.8-.1-1.5-.1-2.2s-.1-1.2-.1-1.6h80c0 1.1.1 2.1.1 3.1s.1 1.6.2 1.9h.2c.7-1.6 2-2.9 3.7-4s3.8-1.7 6.1-1.7c1.9 0 3.6.5 5.2 1.5s2.7 2.5 3.4 4.7c.9-2.1 2.3-3.7 4.1-4.7s3.7-1.5 5.7-1.5c2.2 0 4 .4 5.4 1 1.4.7 2.5 1.6 3.3 2.7s1.4 2.4 1.7 3.9c.3 1.5.5 3 .5 4.6v17h-3.7v-16.8c0-1.2-.1-2.3-.3-3.4-.2-1.1-.6-2.1-1.1-2.9-.5-.9-1.2-1.6-2.2-2.1-.9-.5-2.1-.8-3.6-.8-1.7 0-3.2.3-4.3 1-1.1.6-2 1.5-2.6 2.4-.6 1-1.1 2.1-1.4 3.2-.3 1.2-.4 2.2-.4 3.3v16h-3.7v-17.1c0-2.6-.5-4.8-1.5-6.4-1-1.6-2.5-2.4-4.5-2.4-1.4 0-2.7.2-3.9.7s-2.3 1.2-3.2 2.2-1.6 2.2-2.1 3.6c-.5 1.5-.8 3.2-.8 5.2v14.3h-3.7v-20.5h.1zm151 414.5c-1.4 2.2-3.2 3.7-5.4 4.7-2.1.9-4.5 1.4-7 1.4-2.2 0-4.2-.4-5.9-1.1-1.8-.7-3.3-1.8-4.6-3.1-1.3-1.3-2.3-2.9-2.9-4.8-.7-1.8-1-3.9-1-6.1 0-2.1.4-4.1 1.1-5.9s1.7-3.4 3-4.7c1.3-1.3 2.8-2.4 4.5-3.1 1.7-.8 3.7-1.1 5.8-1.1 2.2 0 4.1.4 5.8 1.1 1.7.8 3.1 1.8 4.2 3 1.1 1.3 2 2.7 2.6 4.3s.9 3.2.9 4.9v2.6h-24c0 .8.2 1.8.5 3s.9 2.4 1.7 3.5c.8 1.2 1.9 2.1 3.3 3 1.4.8 3.2 1.2 5.4 1.2 1.9 0 3.7-.5 5.5-1.4 1.8-.9 3.1-2.1 4.1-3.7l2.4 2.3zm-2.8-11.3c0-1.3-.3-2.5-.8-3.6s-1.2-2.1-2.1-2.9c-.9-.8-1.9-1.5-3.2-2-1.2-.5-2.5-.7-3.9-.7-2 0-3.7.4-5 1.2-1.3.8-2.4 1.8-3.2 2.8-.8 1.1-1.3 2.1-1.7 3.1-.3 1-.5 1.7-.5 2.1h20.4z m-96.1 419.9h-25.2c-3.1 0-6-.6-8.8-1.7-2.8-1.1-5.2-2.7-7.2-4.6-2.1-2-3.7-4.3-4.9-7.1-1.2-2.7-1.8-5.7-1.8-9 0-3.2.6-6.2 1.7-8.9s2.7-5.1 4.8-7.1c2-2 4.4-3.6 7.2-4.7 2.7-1.1 5.7-1.7 8.9-1.7 3.1 0 6 .6 8.7 1.7 2.7 1.1 5.1 2.6 7.1 4.6s3.6 4.3 4.8 6.9c1.2 2.7 1.8 5.5 1.8 8.7 0 1.9-.2 3.7-.7 5.5s-1.1 3.5-1.9 5c-.8 1.6-1.9 3-3.2 4.2-1.3 1.2-2.7 2.2-4.3 3v.1h13v5.1zm-25.5-5.6c2.4 0 4.6-.4 6.6-1.3s3.7-2.1 5.1-3.6 2.5-3.4 3.3-5.5c.8-2.1 1.2-4.3 1.2-6.7 0-2.3-.4-4.5-1.2-6.5-.8-2-1.9-3.8-3.4-5.2-1.4-1.5-3.2-2.7-5.1-3.5-2-.9-4.1-1.3-6.5-1.3-2.3 0-4.4.4-6.4 1.3s-3.7 2-5.1 3.5c-1.4 1.5-2.6 3.2-3.4 5.2-.8 2-1.2 4.1-1.2 6.4 0 2.4.4 4.6 1.2 6.7.8 2.1 1.9 3.9 3.3 5.5s3.1 2.8 5.1 3.7c1.9.9 4.1 1.3 6.5 1.3zm-67.7 419.9h-5.6v-4.5h-.1c-.7 1.6-1.9 2.8-3.7 3.8-1.7 1-3.7 1.5-6 1.5-1.4 0-2.8-.2-4.1-.6s-2.4-1.1-3.4-2-1.7-2.1-2.3-3.5c-.6-1.4-.9-3.1-.9-5v-19h5.6v17.3c0 1.4.2 2.5.6 3.5.4 1 .9 1.7 1.5 2.3.6.6 1.3 1 2.1 1.3.8.3 1.6.4 2.5.4 1.2 0 2.2-.2 3.2-.6 1-.4 1.9-1 2.6-1.8s1.3-1.8 1.7-3.1c.4-1.2.6-2.7.6-4.4v-14.9h5.6v29.3h.1zm-62.6 380.2c0-1.1.4-2.1 1.2-2.9.8-.8 1.8-1.2 2.9-1.2s2.1.4 2.9 1.2c.8.8 1.2 1.8 1.2 2.9 0 1.1-.4 2.1-1.2 2.9-.8.8-1.8 1.2-2.9 1.2s-2.1-.4-2.9-1.2c-.8-.9-1.2-1.8-1.2-2.9zm1.3 10.4h5.6v29.3h-5.6v-29.3zm-28.6 398.4c-1-1.1-2.1-1.9-3.3-2.4-1.1-.6-2.5-.8-4.1-.8-1.5 0-2.9.3-4 .8-1.1.6-2.1 1.3-2.8 2.3-.8 1-1.3 2.1-1.7 3.3-.4 1.3-.6 2.6-.6 3.9 0 1.4.2 2.6.7 3.9.5 1.2 1.1 2.3 1.9 3.2s1.8 1.6 3 2.1 2.5.8 3.9.8c1.6 0 2.9-.3 4-.8 1.1-.6 2.1-1.4 3.1-2.4l4 4c-1.4 1.6-3.1 2.8-5 3.5-1.9.7-4 1-6.1 1-2.3 0-4.3-.4-6.2-1.1-1.9-.7-3.5-1.8-4.9-3.1-1.4-1.3-2.4-2.9-3.2-4.8-.7-1.9-1.1-3.9-1.1-6.2 0-2.3.4-4.3 1.1-6.2s1.8-3.5 3.1-4.9c1.3-1.4 3-2.4 4.8-3.2 1.9-.8 4-1.1 6.3-1.1 2.1 0 4.2.4 6.2 1.1 2 .8 3.7 1.9 5.1 3.5l-4.2 3.6zm-20.2 373.2h5.6v30.1l-2 390.7h7.7l-8 404l14.9 15.9h-1l-13.6-15.2v15.2h-5.6v-46.7z m-124.2 404.5c-.6 0-1-.5-1-1.2v-11.5c0-.8.5-1.2 1-1.2.2 0 .5.1.7.2l9.9 5.7c.4.2.7.6.7 1s-.2.8-.7 1l-9.9 5.7c-.2.2-.5.3-.7.3z"/> </svg>
here's link homepage inline svg displayed (note: it's logo)
you seem have copy paste nested markup. inner <path
part invalid presumably issue.
<path class="qfsvg" <path
Comments
Post a Comment