1

Well this a label I have on a svg image, it works fine on all browsers except Safari where it will not show up and I can't get why this part of the svg doesn't show up....

<g>
  <g>
       <defs>
    <rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect>
       </defs>
       <clipPath id="SVGID_8_">
            <use xlink:href="#SVGID_7_" overflow="visible"></use>
       </clipPath>
       <path clip-path="url(#SVGID_8_)" fill="#120F0B" d="M221.463,862.222c0-2.149,1.755-3.904,3.902-3.904h76.462 c2.146,0,5.144-1.242,6.662-2.759l3.254-3.255c1.52-1.52,4.003-1.522,5.522-0.003l3.255,3.258 c1.521,1.517,4.516,2.759,6.665,2.759h78.164c2.146,0,3.902,1.755,3.902,3.904v23.73c0,2.146-1.756,3.903-3.902,3.903H225.365c-2.147,0-3.902-1.757-3.902-3.903V862.222z"/>
   </g>
   <text transform="matrix(1 0 0 1 277.3213 876.9551)" fill="#FFFFFF" font-family="'FedraSansStd-Normal'" font-size="9.64">Drinkwaterbalans</text>
</g>

and this is the svg tag from the top:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="600px" height="1000px" viewBox="0 0 625 1000"
     enable-background="new 0 0 625 1000" xml:space="preserve" 
     preserveAspectRatio="xMinYMin none">
Ondra Žižka
  • 43,948
  • 41
  • 217
  • 277
Robert Voicu
  • 74
  • 1
  • 11

2 Answers2

0

Found the answer !

if i removed : 

<defs>
       <rect id="SVGID_7_" x="221.463" y="851.163" width="187.789" height="38.692"></rect></defs>
<clipPath id="SVGID_8_">
       <use xlink:href="#SVGID_7_" overflow="visible"></use>
</clipPath>

the grafic shows up even in Safari! and corect

Robert Voicu
  • 74
  • 1
  • 11
-1

You need to put your SVG declaration before your SVG tag. Add the <g> tag after the <body> tag and put the <svg> tag after the <g> tag.

SomethingDark
  • 13,229
  • 5
  • 50
  • 55
Unetitebiere
  • 1