Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
New Contributor
arris
Posts: 4
Registered: ‎03-23-2010
My Device: 9000
Accepted Solution

Acessing SVG-DOM with Javascript

Hello,

 

im trying to manipulate the dom of a embedded svg-image  with javascript in a bb-widget. I've included the svg-file as follows:

 

<object id="svgobj" width="100%" height="100%" name="sv" data="http://172.16.16.164/img/test.svg" type="application/x-vnd.rim.pme"></object>

 

 

The image gets displayed, so this seems the right way. Now, how can i access the svg's dom from my html page with javascript? I'e tried the following, which i found on some website:

 

<script type="text/javascript">
    function start(){
      var obj = document.getElementById('svgobj');
      if (obj && obj.contentDocument) {
        svgdoc = obj.contentDocument;
      }
      else {
        svgdoc = obj.getSVGDocument();
      }
      svgRoot = svgdoc.documentElement;
    } 
</script>

 But transformating dom-children of svgRoot has no effect. I'm using bb 9000 and 9500 simulators.

 

 

greets, arris

Please use plain text.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Acessing SVG-DOM with Javascript

I'm not 100% sure, but I think once you have the object element you can retrieve the DOM of the SVG by referencing the "document" property.

 

So in your code you would use "obj.document".   Then you would have the DOM document for the SVG 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
arris
Posts: 4
Registered: ‎03-23-2010
My Device: 9000

Re: Acessing SVG-DOM with Javascript

referencing the "document" property does not work either.

a call of alert(obj.document) says "undefined"...

is there any example about accesing the dom-tree of a svg in a blackberry-widget?

Please use plain text.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Acessing SVG-DOM with Javascript

Hi arris,

 

I noticed that in your type attribute you have the incorrect value.  It should be image/svg+xml

 

Once you have this you should be able to retrieve the SVG document via the "getSVGDocument()" function.  Also of note, some of the early builds of the browser (somewhere before build 400) the SVG document was not yet made available.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
arris
Posts: 4
Registered: ‎03-23-2010
My Device: 9000

Re: Acessing SVG-DOM with Javascript

Hi,

 

changing the type attribute did not solve my problem. My widget has the following structure:

a html page:

 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript">
  function start(){
    var obj = document.getElementById('svgobj');
    svgdoc = obj.getSVGDocument();
    svgRoot = svgdoc.documentElement;
    svgRoot.getElementsByTagName("g")[0].setAttribute("stroke","red");
  }
</script>
</head>
<body>
  <object type="image/svg+xml" id="svgobj" data="test.svg" width="300" height="300" />
</body>
</html>

 the test.svg file.

 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:pz="http://www.plazmic.com/plazmic_svgt_extents"
id="test_cp_07" version="1.1" baseProfile="tiny" 
xml:space="default" viewBox="0 0 1500 1500" viewport-fill="#ffffff" 
preserveAspectRatio="xMidYMid meet" onload="startup(evt)">
<script type="text/ecmascript">
//<![CDATA[
  function startup(evt){
    O=evt.target
    svgDoc=O.ownerDocument;
    root=svgDoc.documentElement;
    top.start();
  }
//]]>
</script>
  <g id="testid" stroke="black">
    <!-- X Axis -->
    <path d="M 750 0 L 750 1500 Z"/>
    <!-- Y Axis -->
    <path d="M 0 750 L 1500 750 Z"/>
  </g>
</svg>

 and my config.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:rim="http://www.blackberry.com/ns/widgets" version="1.0.0" rim:header="RIM-Widget:rim/widget" xmlns="http://www.w3.org/ns/widgets">
  <name>test</name>
  <description>blackberry test widget</description>
  <content src="test.html" />
  <rim:loadingScreen backgroundColor="#333333"/>
  <license>
    Example license
  </license>
  <feature id="blackberry.system" />
  <feature id="blackberry.system.event" version="1.0.0"/>  
</widget>

 My svg consists of to black lines, i want to change the the color to red once the svg is loaded.

The start() function gets called, when i add an alert() it pops up. But the color does not change, it seems this is the wrong way to access the dom of the svg. I've tested the widget in the following simulators:

BB 9000/5.0.0.334

BB 9630/5.0.0.419

BB 9000/5.0.0.451

For me it seems like it is not possible to access and manipulate the dom of a svg in a widget. Can you confirm that? Has someone tried this before?

 

greets, arris

 

 

 

 

Please use plain text.
Retired
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Acessing SVG-DOM with Javascript

Talking to one of our internal developers and below is the response:

 

They look to be using javascript from inside their SVG. I don’t believe the browser currently supports embedded javascript inside an SVG file. I have tried to get this to work in the past but have had no success. The code they provided will work if you call the start() function they provided from the main document, rather than having it called from within the SVG itself on the onload event.

 

If they insert an onLoad event attribute into the object tag and make that call start() it should be able to produce the same results. The only difference here is that the code is being called from outside the SVG.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Contributor
arris
Posts: 4
Registered: ‎03-23-2010
My Device: 9000

Re: Acessing SVG-DOM with Javascript

thank you *very* much! great support!

Please use plain text.