Other Usage

How to insert image on a rectangle inside the svg

verothor
Path Finder

Hello all,

please could you help me with one question - it is possible to add an png image on a rectangle square?

Just as an example the rectangle is set like this - it is possible to include there an image to the corner of the rectangle?

<a href=""> <g>
<rect style=fill:color_grey width="150" height="90" x=1200 y=200/>
</g>
</a>

 

Thank you for any help and answers.

Labels (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

What has this to do with Splunk?

0 Karma

verothor
Path Finder

The SVG is used on a splunk dashboard and inside this I needed to add a picture on a rectangles, so thought someone maybe have some experience with this.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Alternatively, you could look at using CSS to modify the fill pattern used. There are a number of issues with this. Firstly, the pattern must have been visible on your dashboard. Secondly, for column charts for example, the "bars" are defined as a path for each series; this means that the pattern is applied across the whole series, not each bar separately. Thirdly, the image used must be available.

In this example, I have used the app icon

  <row>
    <panel>
      <html>
        <svg version="1.1" height="100" width="200">
          <defs>
            <pattern id="imagefiller" patternUnits="userSpaceOnUse" width="500" height="500">
              <rect style="fill:blue" width="500" height="500"/>
              <image href="/en-GB/splunkd/__raw/servicesNS/username/application/static/appIcon_2x.png" x="20" y="100" width="30" height="30" />
            </pattern>
          </defs>
          <g>
            <rect style="fill:url(#imagefiller)" width="150" height="90"/>
          </g>
        </svg>
        <style>
          #filler g.highcharts-series path.highcharts-graph {
            fill: url(#imagefiller);
          }
        </style>
      </html>
    </panel>
    <panel>
      <chart id="filler">
        <search>
          <query>| makeresults count=5
| eval value=random()%5
| eval series=mvindex(split("ABC",""),random()%3)
| chart sum(value) by series</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

So, you want to change the svg generated by the viz / chart? You can do this by creating a custom visualisation.

Custom visualizations API | Documentation | Splunk Developer Program

0 Karma
Get Updates on the Splunk Community!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Wondering How to Build Resiliency in the Cloud?

IT leaders are choosing Splunk Cloud as an ideal cloud transformation platform to drive business resilience,  ...

Updated Data Management and AWS GDI Inventory in Splunk Observability

We’re making some changes to Data Management and Infrastructure Inventory for AWS. The Data Management page, ...