html - Safari, Inline SVG & <use> -


i'm using svg via element quite extensively , it's fine in browsers (chrome, ff, opera, android chrome , browser). safari (8 mac osx, ios8), in particular having issues rendering them.

the specific issue although svg seems occupying space in document, nothing visible. i've tried fill svg , checked several against different backgrounds ensure wasn't issue.

here example of "source" svg before closing </body> , referenced via <use> in part of document.

<div class="vh">     <!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg"><symbol id="youtube-icon" viewbox="0 0 512 512"><path fill="#fff" d="m129.86 50h24.736l16.933 63.55l187.264 50h24.95l-28.58 94.504v64.486h159.08v-64.486l129.86 50zm81.244 129.74c0 20.667 10.8 31.427 31.95 31.427 17.537 0 31.35-11.73 31.35-31.428v-57.49c0-18.357-13.675-31.51-31.35-31.51-19.205 0-31.95 12.692-31.95 31.51v57.49zm22.44-55.556c0-6.42 2.956-11.184 9.08-11.184 6.69 0 9.55 4.622 9.55 11.184v54.555c0 6.384-3.254 11.103-9.122 11.103-6.022 0-9.508-4.926-9.508-11.104v-54.556zm99.805-32.478v89.025c-2.658 3.33-8.57 8.784-12.822 8.784-4.666 0-5.81-3.186-5.81-7.902v91.706h-21.805v98.03c0 11.585 3.543 20.948 15.232 20.948 6.598 0 15.755-3.433 25.203-14.64v12.946h21.806v91.706h333.35zm-32.077 240.428c1.48 1.954 2.22 4.815 2.22 8.583v57.672c0 3.56-.6 6.126-1.798 7.697-2.29 2.996-7.246 2.86-10.625 1.15-1.59-.8-3.227-2.11-4.916-3.927v-69.607c1.41-1.533 2.835-2.67 4.28-3.403 3.636-1.84 8.328-1.482 10.84 1.834zm69.91-2.53c-7.696 0-9.278 5.415-9.278 13.09v11.308h18.347v-11.307c0-7.55-1.602-13.09-9.07-13.09zm434.515 412c0 27.614-22.386 50-50 50h127.484c-27.614 0-50-22.386-50-50v285.684c0-27.615 22.386-50 50-50h257.03c27.615 0 50 22.385 50 50v412zm161.734 295.128h24.195v273.15h-71.78v21.978h24.196v129.44h23.388v-129.44zm83.19 17.743h-20.768v84.786c-2.534 3.174-8.163 8.365-12.21 8.365-4.443 0-5.532-3.032-5.532-7.526v312.87h-20.768v93.36c0 22.664 15.367 22.803 26.56 16.39 4.142-2.375 8.122-5.838 11.95-10.382v12.33h20.768v312.87zm79.942 26.59c0-15.15-5.037-28-20.247-28-7.417 0-13.78 4.727-18.466 10.437v273.15h-20.97v151.418h20.97v-8.586c5.79 7.22 12.12 9.998 19.725 9.998 13.817 0 18.986-10.733 18.986-24.555v339.46zm76.758 3.44c0-20.187-9.627-32.852-29.55-32.852-18.734 0-31.543 13.463-31.543 32.853v50.137c0 20.107 10.142 34.557 29.972 34.557 21.884 0 31.122-13.034 31.122-34.557v-8.39h380.25v7.763c0 9.725-.51 15.625-9.276 15.625-8.36 0-9.07-7.246-9.07-15.625v-21.07h39.72v342.9z"></path></symbol></svg><!-- endinject --> </div>

here reference symbol within same html page:

<svg class="svg-icon social_links__icon" aria-labelledby="title" role="img">        <title>twitter</title>        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon"></use> </svg>

i have seen similar question, suggested answers don't solve problem.

i have tried adding height & width source svg element, source pattern , <svg> wrapper around <use> , neither seems have impact.

the class .social_links__icon on wrapper <svg> adds following styles:

display: block; height: 24px; width: 66px;

any appreciated.

i have managed find solution issue , i'm posting here others may run same problem.

my source <svg> included @ end of html document, before closing <body> tag , <use> referencing pattern. tried moving below opening <body> tag , worked.

it seems safari won't allow <use> reference subsequent part of document. i'm not sure if browser bug or not, it's simple solve once problem known.

i found an article has same solution.


Comments

Post a Comment

Popular posts from this blog

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

im trying write component admin side , need add user creation. dont want duplicate existing codes add link. know how add task not simple link toolbar. thx help. if wanting button opens new user screen can try in component: $bar = jtoolbar::getinstance('toolbar'); $bar->appendbutton('link', 'users', 'new user','index.php?option=com_users&task=user.add'); you need add view.html.php file wherever you're creating toolbar. is need?
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more