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.
What has this to do with Splunk?
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.
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>
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