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.

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!

Prove Your Splunk Prowess at .conf25—No Prereqs Required!

Your Next Big Security Credential: No Prerequisites Needed We know you’ve got the skills, and now, earning the ...

Splunk Observability Cloud's AI Assistant in Action Series: Observability as Code

This is the sixth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how to ...

Splunk Answers Content Calendar, July Edition I

Hello Community! Welcome to another month of Community Content Calendar series! For the month of July, we will ...