cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SVG in Lumira

Go to solution
Former Member

on ‎10-13-2015 7:17 PM

0 Kudos

I built an SVG image with proper id's so that I can modify it with d3.js using select("#id"). But the problem is I am not able to insert the SVG code into the lumira extension.

The SVG element contains text and this is what I want to modify with d3.js.

But without actually adding the svg code, I cannot modify it with d3.js

Is it correct to say that I would use something like require.js?

Any hints?

thanks!

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎10-19-2015 12:59 PM
0 Kudos

Wrote up the answer to this in a blog post:

Show replies
Show replies

Answers (5)

Answers (5)

Robert_Russell
Contributor
‎10-18-2015 9:40 PM
0 Kudos

Hi Federick,

See you already worked out an answer for your question, cool, if you mark this as answered with a link to your blog?

Cheers

Robert

Show replies
Show replies
vincentdechandon
Contributor
‎10-14-2015 1:55 PM
0 Kudos

Hey.

To load a file.svg and then be able to modify it, loading it through an <img> tag won't work.

You have to load it through AJAX, you'll receive the content like if you would have open the svg file in a text editor.

Then using jQuery, just append the content to the main container (using .html() for example), jQuery will take care of it all.

Just be aware that parsing svg afterwards to modify it might be limitated for some selectors. In this case, use pure Vanilla JS.

Br,

Vincent.

Show replies
Show replies
Former Member
‎10-13-2015 7:55 PM
0 Kudos

Here is a better description:

I have an svg file that I wrote. Here is a snippet:

<g

     id="item5">

    <rect

       rx="14.811304"

       ry="14.811304"

       y="925"

       x="277.70612"

       height="36.18919"

       width="200.17131"

       id="item2"

       transform="translate(0,-520.8662)"

       style="display:inline;opacity:1;fill:#f17431;fill-opacity:0.99703232;stroke:none" />

    <text

       id="item5Text"

       y="430"

       x="379"

       text-anchor="middle"

       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';writing-mode:lr-tb;fill:#000000;fill-opacity:0.9910979">1</text>

  </g>

  <g

     id="item6">

    <rect

       rx="14.811304"

       ry="14.811304"

       y="925"

       x="505.59637"

       height="36.18919"

       width="200.17131"

       id="item3"

       style="display:inline;opacity:1;fill:#f17431;fill-opacity:0.99703232;stroke:none"

       transform="translate(0,-520.8662)" />

    <text

       id="item6Text"

       y="430"

       x="605"

       text-anchor="middle"

       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';writing-mode:lr-tb;fill:#000000;fill-opacity:0.9910979">2</text>

  </g>

I then use d3 to access the values stored in the text and modify them with:

d3.select("item5").text('12');

How can I include my svg specification and then modify it using d3.js in an extension?

Show replies
Show replies
Former Member
‎10-13-2015 7:59 PM
0 Kudos

Hi,

Can u refer this link for addinf text element using SVG

SVG Text Element | DashingD3js.com

Former Member
‎10-13-2015 8:03 PM
0 Kudos

I am aware of this information. The thing is, I cannot dynamically build the svg image as it is several hundred lines long. This only shows how to dynamically build an svg, not take an existing svg file and append the contents to the extension.

Former Member
‎10-13-2015 8:04 PM
0 Kudos

there is a code- d3.select("container like <body>").append("svg") .append() inside the last append you can create your circle, append image, text  etc.

There are some helpful links below you can go through.

Regards

Ranajay

Former Member
‎10-13-2015 8:07 PM
0 Kudos

Hi,

According to your reply i understand u need to take existing SVG element and  append your image?

Former Member
‎10-13-2015 8:08 PM
0 Kudos

Calling svg element with html tags are bit different than calling svg using d3. You need to change your html based svg to purely d3 based otherwise it can't be deployed in SAP Lumira as extension.

Former Member
‎10-13-2015 8:11 PM
0 Kudos

I have a file called image.svg, I want to modify this .svg file from d3 in the extension.

This .svg file is several hundred lines long. It contains <text> content that I then want to modify with d3.js.

There does not appear to include my <svg> description in the <body> and then modify it.

Former Member
‎10-13-2015 8:13 PM
0 Kudos

so there is no way of including my html <svg> defined svg image to the body of the container?

Former Member
‎10-13-2015 8:14 PM
0 Kudos

see my below post

Former Member
‎10-13-2015 8:15 PM
0 Kudos

Hi,

Can you convert all avg based html files into d3, so that interaction will be easy and deployment in SAP Lumira can be done. Refer: https://www.dashingd3js.com/creating-svg-elements-based-on-data

Former Member
‎10-13-2015 8:16 PM
0 Kudos

But if your objective is just to insert an image in your story board, you can do it in the story tab of Lumira, where you can add and adjust different images and symbols to your story along with the visualisation.

Former Member
‎10-13-2015 7:45 PM
0 Kudos

Still not clear, try to post with some example and image

Show replies
Show replies
Former Member
‎10-13-2015 7:37 PM
0 Kudos

Hi,

Can you say the exact problem! R you trying with webide if so send the error msg

Show replies
Show replies
Former Member
‎10-13-2015 7:39 PM
0 Kudos

Yes WebIDE, no error, I just do not know how to include my <svg> file in the extension.

Former Member
‎10-13-2015 7:44 PM
0 Kudos

Hi,

Initially follow these steps,

Ask a Question