topic Re: How to insert image on a rectangle inside the svg in Other Usage

How to insert image on a rectangle inside the svg

verothor — Wed, 30 Aug 2023 16:10:23 GMT

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.

Re: How to insert image on a rectangle inside the svg

ITWhisperer — Wed, 30 Aug 2023 16:28:30 GMT

What has this to do with Splunk?

Re: How to insert image on a rectangle inside the svg

verothor — Thu, 31 Aug 2023 06:32:54 GMT

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.

Re: How to insert image on a rectangle inside the svg

ITWhisperer — Thu, 31 Aug 2023 06:46:10 GMT

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

Re: How to insert image on a rectangle inside the svg

ITWhisperer — Thu, 31 Aug 2023 08:13:16 GMT

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>