title: Updating xlink:href doesn't read CSS of source element in Safari
body: <p>I'm trying to code SVG with some scripting. One of the issue I encountered is changing <code>xlink:href</code> for <code>&lt;use /&gt;</code> element in Safari - it turns black after setting this attribute. It works fine in Chrome.</p>
  
  <p>Test page is at <a href="http://test.ukleja.info/xlink-test.svg" rel="nofollow">http://test.ukleja.info/xlink-test.svg</a></p>
  
  <p>Clicking on the grey circle (which is <code>&lt;use /&gt;</code> element) should change <code>xlink:href</code> attribute and links to another <code>&lt;symbol&gt;</code> element defined in <code>&lt;defs&gt;</code> and make it blue.</p>
  
  <p>Below I'm pasting the code:</p>
  
  <pre><code>&lt;svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
      &lt;script&gt;
          function newUse () {
              document.getElementById('myUse').setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#newUse')
          }
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
          .existing {
              stroke: #666;
              stroke-width: 16;
              fill: #ccc;
          }
          .new {
              stroke: #3399ff;
              stroke-width: 16;
              fill: #99ccff;
          }
      &lt;/style&gt;
      &lt;defs&gt;
          &lt;symbol id="existingUse" style="overflow:visible"&gt;
              &lt;circle cx="48" cy="48" r="48" class="existing" /&gt;
          &lt;/symbol&gt;
          &lt;symbol id="newUse" style="overflow:visible"&gt;
              &lt;circle cx="48" cy="48" r="48" class="new" /&gt;
          &lt;/symbol&gt;
      &lt;/defs&gt;
      &lt;use id="myUse" xlink:href="#existingUse" x="64" y="64" onclick="newUse()" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Please help me and tell me what is wrong. Thanks.</p>
  
  <hr>
  
  <p>After many trials I found the reason - it does not depend on namespaces, xlink or anything like that - as far as I know. Hence I changed the topic a little bit.</p>
  
  <p>Safari does not read class/style of the <code>symbol</code> element that <code>use</code> element refers to. Changing style inline directly in the <code>symbol</code> element solves the problem. However it is still not desired behaviour of Safari.</p>
  
  <p>Any ideas?</p>