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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...