473,396 Members | 2,009 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

[scripting SVG with JS] creating "image" element

MiW
Hi

I'm making a kind of JavaScript-based library for creating SVG
objects/elements. And I hit the wall...

Every element (rect, circle etc.) can be created using
*.createElement, then *.setAttribute and *.appendChild. Except "image"
element. When 'image' element is created like this, it doesn't display
anything. When I create that element with the same attributes in SVG
code itself, it works perfectly. It works even if I create it with
only 'id' and 'xlink:href' attributes set in SVG and the rest in the
script.

I mean - why this...

<image id="Bitmap" xlink:href="Macius.jpg"/>
[...]
SVGDoc = evt.getTarget().getOwnerDocument();
Bitmap = SVGDoc.getElementById("Bitmap");
Bitmap.setAttribute ("x", 100);
Bitmap.setAttribute ("y", 100);
Bitmap.setAttribute ("width", 128);
Bitmap.setAttribute ("height", 128);

....works and that...

SVGDoc = evt.getTarget().getOwnerDocument();
SVGRoot = SVGDoc.getDocumentElement();
Bitmap = SVGDoc.createElement ("image");
Bitmap.setAttribute ("x", 100);
Bitmap.setAttribute ("y", 100);
Bitmap.setAttribute ("width", 128);
Bitmap.setAttribute ("height", 128);
Bitmap.setAttribute ("xlink:href", "Macius.jpg");
SVGRoot.appendChild (Bitmap);

.... doesn't ???

--
thanks
MiW
Jul 23 '05 #1
2 7475
On Mon, 16 May 2005 23:00:18 +0200, "MiW" <mi*@zeus.polsl.gliwice.pl>
wrote:
Every element (rect, circle etc.) can be created using
*.createElement, then *.setAttribute and *.appendChild. Except "image"
element. When 'image' element is created like this, it doesn't display
anything. When I create that element with the same attributes in SVG
code itself, it works perfectly. It works even if I create it with
only 'id' and 'xlink:href' attributes set in SVG and the rest in the
script.


you need to learn about createElementNS and setAttributeNS -
namespaces matter

svgNS="http://www.w3.org/2000/svg";
xlinkNS="http://www.w3.org/1999/xlink";

img=SVGDoc.createElementNS(svgNS,"image");
.....
img.setAttributeNS(xlinkNS,"href","marcus.jpg");
....
Jul 23 '05 #2
MiW
> you need to learn about createElementNS and setAttributeNS -
namespaces matter


Thank you very much :)
Works perfectly...

When it's finished, I'll show you the effects :)

--
MiW
Jul 23 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: krunkelgarten | last post by:
Hi there, I'm trying to create a fully automatic image gallery. I already have the page that automatically creates the index of thumbnails. What i want now, is to create a page which indexes...
5
by: Roger Shrubber | last post by:
I have a page with images that the user can drag from one frame to another. I need them to see a "ghost image" of the image they are dragging, while the original stays put. I use the onmousemove...
1
by: Dave | last post by:
Hi all, I was trying to make an image submit button with a rollover and discovered to my suprise that there is no way to access a form element of the "image" type. I tried specifying it by name...
1
by: zelnugget | last post by:
I'm using a fading image script that I found via Google Groups on this newsgroup, and am having some difficulty with it. First, here's a link to the Google Groups posting: ...
2
by: Mr.Clean | last post by:
If I have an Input of type image, it is not listed in the Forms elements when walking to DOM using MSHTML. Is this expected behaviour and how would I get the image input to submit the form NOT...
17
by: Alan Silver | last post by:
Hello, I have a page which I am converting to use themes. The page has an HTML <input type="image"> element that is used to post to another page. I would like to replace this with a server...
2
by: Alan Silver | last post by:
Hello, If I have the following HTML... <input type="image" src="fred.gif"> .... is there a way to specify the image in CSS rather than in the HTML? TIA
3
by: =?Utf-8?B?V2lsbA==?= | last post by:
I have an image "button" which causes a postback. I handle the "click" with If Request.Form("btnBU7WD6_Submit.X") 0 Then... this works great. However, when a user double-clicks the image...
4
by: Ryan Knopp | last post by:
This is an update from a previous post, I just simplified the code. It seems that I can't get the image map to work with IE7. The page is located here http://www.theknopps.com/test.html and the...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.