Dashboards & Visualizations

SVG use element getting removed in simplexml

spammenot66
Contributor

Hi all,

I'm trying to reuse an svg image multiple times on the same page but its not working. When i use chrome inspect, i noticed the <use /> is getting removed. Any help would be greatly appreciated.

In the example below, it should create a fire svg above the logs, but it never gets rendered.

 

 

 

<form>
  <label>testsvg</label>
  <row>
    <panel>
       
      <html>
<svg width="300" height="300" viewBox="0 0 300 300">
  <title>Campfire</title>
  <desc>A campfire burning in a pit</desc>

  <g style="fill: #777;">
    <title>Fire Pit</title>
    <desc>The fire pit in which the campfire is burning</desc>
    <path d="M26.851,222.754 L0,222.754 L0,271.758 C0,286.751 14.555,299 32.443,299 L267.52,299 C285.408,299 300,286.751 300,271.758 L300,222.754 L273.112,222.754 L273.112,266.534 C273.112,272.067 267.816,276.484 261.27,276.484 L38.693,276.484 C32.147,276.484 26.851,272.058 26.851,266.534 L26.851,222.754 z" />
 </g>

 <defs>
   <g id="fire" transform="translate(0,10)">
     <title>Flames</title>
     <desc>The crackling flames of a campfire</desc>
     <path d="M101.138,160.949 C94.916,154.464 53.538,110.17 95.277,71.802 C130.054,39.868 135.137,13.003 123.434,-0 C123.434,-0 211.959,33.692 159.877,111.877 C150.998,125.163 128.702,140.843 140.369,173.129 L101.138,160.949 z" />
     <path d="M155.503,171.572 C153.624,165.019 145.142,150.746 171.021,122.303 C184.873,107.172 190.104,84.742 191.308,76.301 C191.308,76.301 237.167,100.662 191.576,160.215 L155.503,171.572 z" />
   </g>
 </defs>

 <!-- <g transform="translate(0,10)" fill="#530" stroke="#310" stroke-width="0">-->
 <g transform="translate(0,10)" fill="#530" stroke="#310" stroke-width="0"> 
   <title>Logs</title>
   <desc>The logs burning in the campfire</desc>
   <path d="M240.344,255.473 L240.344,216.874 L59.378,160.915 L59.378,199.513 z"/>
   <path d="M165.259,180.707 L240.321,157.488 L240.321,196.087 L227.627,199.99 z"/>
   <path d="M134.519,235.715 L59.419,258.9 L59.419,220.301 L72.151,216.433 z"/>
 </g>

  <use href="#fire" />
</svg>

<div>
TESTING
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <use href="#fire" />
</svg>

</div>

      </html>
    </panel>
  </row>
</form>

 

 

 

Labels (2)
Tags (2)
0 Karma
Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!