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
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...