Class nokia.maps.gfx.SvgParser
Class Summary
An SvgParser can be used to convert an SVG string into an instance of
nokia.maps.gfx.IDL.
Example:
// Parse an SVG mark-up string.
var svgParser = new nokia.maps.gfx.SvgParser(),
svgText = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="28" height="36" viewBox="0 0 28 36">' +
'<path stroke="none" fill-opacity="0.40000003799999995" fill="#000000" d="M 18.9 33.4 C 18.9 34.8 16.7 36 13.899999999999999 36 C 11.099999999999998 36 8.899999999999999 34.8 8.899999999999999 33.4 C 8.899999999999999 32 11.099999999999998 30.799999999999997 13.899999999999999 30.799999999999997 C 16.7 30.799999999999997 18.9 31.9 18.9 33.4 Z">' +
'</path><path stroke="none" fill-opacity="1" fill="#666666" d="M 14 0 C 6.3 0 0 6.3 0 14.1 C 0 16.2 0.4 18.2 1.3 20.1 L 1.8 21.1 C 3 23.1 12.3 32.2 13.3 33.2 L 14 33.9 L 14.7 33.2 C 15.7 32.2 25 23.1 26.1 21.2 L 26.7 20.2 C 27.5 18.2 28 16.2 28 14.1 C 28 6.3 21.7 0 14 0 Z">' +
'</path><path stroke="none" fill-opacity="1" fill="#666666" d="M 14 0.9 C 21.2 0.9 27 6.8 27 14 C 27 16 26.6 17.9 25.8 19.6 L 25.3 20.5 C 24.2 22.4 14 32.4 14 32.4 C 14 32.4 3.8 22.4 2.7 20.5 L 2.2 19.6 C 1.4 17.9 1 16 1 14 C 1 6.8 6.8 0.9 14 0.9 Z">' +
'</path><path stroke="none" fill-opacity="1" fill="#ffffff" d="M 14 0.9 C 6.8 0.9 1 6.8 1 14 C 1 16 1.4 17.9 2.2 19.6 L 2.7 20.5 C 3.8 22.4 14 32.4 14 32.4 C 14 32.4 24.2 22.4 25.3 20.5 L 25.8 19.6 C 26.6 17.9 27 16 27 14 C 27 6.8 21.2 0.9 14 0.9 Z">' +
'</path><path stroke="none" fill-opacity="1" fill="#ffffff" d="M 14 1.9 C 20.6 1.9 26 7.3 26 14 C 25.9 16.1 25.5 18.2 24.4 20 C 23.8 21.2 17.9 27.1 14 30.9 C 10.1 27.1 4.2 21.2 3.6 20.1 C 2.6 18.2 1.9 16.2 2 14 C 2 7.3 7.4 1.9 14 1.9 Z">' +
'</path><path stroke="none" fill-opacity="1" fill="#43a51b" d="M 14 1.9 C 7.4 1.9 2 7.300000000000001 2 14 C 1.9 16.2 2.6 18.2 3.6 20.1 C 4.2 21.3 10.1 27.1 14 31 C 17.9 27.1 23.8 21.3 24.4 20.1 C 25.5 18.3 25.9 16.200000000000003 26 14.100000000000001 C 26 7.400000000000001 20.6 2.0000000000000018 14 2.0000000000000018 L 14 2.0000000000000018 Z">' +
'</path><path stroke="none" fill-opacity="0.7019608509999999" fill="#ffffff" d="M 21 6.1 C 17.8 3.5 13.7 2.5 11.9 3.9 C 11.4 4.3 11.2 4.8 11.1 5.4 C 15.2 6 18.2 8.100000000000001 19.6 9.9 C 22 13 21.6 13.9 21.6 13.9 C 22.400000000000002 13.9 23 13.700000000000001 23.5 13.3 C 25.3 11.9 24.2 8.8 21 6.200000000000001 L 21 6.200000000000001 Z">' +
'</path><text font-family="arial" font-size="13px" font-weight="bold" alignment-baseline="middle" text-anchor="middle" fill="#ffffff" opacity="0.866666749" y="0" x="0" transform="matrix(1, 0, 0, 1, 14, 15)">X</text></svg>',
idlImage = svgParser.parseSvg(svgText);
// And show it within the page.
var image = new nokia.maps.gfx.GraphicsImage(idlImage),
body = document.body || document.documentElement;
body.appendChild(image.createElement());
Note that this parser does not support the full SVG standard and is currently experimental.
new nokia.maps.gfx.SvgParser
()
SvgMarkupInfo
This is an abstract interface for documentation purpose only.
Method Summary
parseSvg
(svgMarkup)
: nokia.maps.gfx.IDL
This method parses the supplied SVG string into an IDL object.
parseSvgInfo
(svgMarkup)
: nokia.maps.gfx.SvgParser.SvgMarkupInfo
This method returns information about the SVG mark-up.
parseSvgToGraphics
(svgMarkup, [graphics])
: nokia.maps.gfx.Graphics
This method parses an SVG string and renders it using a graphics context.
Method Detail
parseSvg
(svgMarkup)
: nokia.maps.gfx.IDL
This method parses the supplied SVG string into an IDL object.
Parameters:
| {String | Document} | svgMarkup | An SVG mark-up string or an XML document |
Returns:
| {nokia.maps.gfx.IDL} | An IDL generated from the SVG mark-up |
parseSvgInfo
(svgMarkup)
: nokia.maps.gfx.SvgParser.SvgMarkupInfo
This method returns information about the SVG mark-up.
Parameters:
| {String | Document} | svgMarkup | An SVG mark-up string or an XML document |
Returns:
| {nokia.maps.gfx.SvgParser.SvgMarkupInfo} |
Information about the SVG mark-up or null if the SVG parsing failed
|
parseSvgToGraphics
(svgMarkup, [graphics])
: nokia.maps.gfx.Graphics
This method parses an SVG string and renders it using
a graphics context. The method can be used to scale SVGs,
as shown in the example below:
// Create the SVG parser, a graphics context and the SVG string
// that defines a 100 x 100 pixels SVG, with a circle in the
// middle that has a radius of 40 pixels.
var gfx = nokia.maps.gfx,
svgParser = new gfx.SvgParser(),
svgString = '<svg width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title><circle stroke-width="5" fill="#FF0000" id="svg_1" r="40" cy="50" cx="50"/></g></svg>',
originalImage,
scaledImage,
body = document.getElementsByTagName("BODY")[0];
// First let's create a graphics image in original size.
originalImage = new gfx.GraphicsImage(
// This function is called when the image is to be rendered.
function (graphics) {
// Parse the SVG string into an IDL.
var idl = svgParser.parseSvg(svgString);
// Create an image from the IDL.
graphics.setIDL(idl);
}
);
// And now one with the size doubled.
scaledImage = new gfx.GraphicsImage(
// This method is called when the image is to be rendered.
function (graphics) {
// Parse the SVG and query information about it.
var svgInfo = svgParser.parseSvgInfo(svgString);
// Create a new image of the double size.
graphics.beginImage(svgInfo.width*2,svgInfo.height*2,"scaled image");
// Scale x- and y-axis by 2.
graphics.scale(2,2);
// Render the SVG string into the existing graphics context using
// the already parsed SVG document (this is faster than
// parsing the XML twice).
svgParser.parseSvgToGraphics(svgInfo.document, graphics);
}
);
// Render the images into the document.
body.appendChild(originalImage.createElement());
body.appendChild(scaledImage.createElement());
Parameters:
| {String | Document} | svgMarkup | An SVG mark-up string or an XML document. |
| {nokia.maps.gfx.Graphics} | [graphics]: | The graphics context that is to be used for rendering; if omitted, a new context is created and then returned |
Returns:
| {nokia.maps.gfx.Graphics} | The graphics context that was used to render this SVG |