31. Can we write javascript functions in SVG images?
Yes! SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.
32. Are mouse events, keyboard events supported in SVG?
Yes! SVG elements support mouse events, keyboard events. We've used onClick event to call a javascript functions.
33. How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to get the SVG elements.
34. How to get a active SVG element using javascript?
In javascript functions, event represents current event and can be used to get the target element on which event got raised.
35. Which element of SVG is used to create links?
<a> element is used to create hyperlink. "xlink:href" attribute is used to pass the IRI
InternationalizedResourceIdentifiers which is complementary to URI UniformResourceIdentifiers.
36. How will you embed an SVG image in HTML page?
SVG image can be embedded using following ways -
using embed tag
using object tag
using iframe
37. How to draw a rectangle in SVG?
'rect' tag of SVG is used to draw a rectangle. Following are the commonly used attributes -
x - x-axis co-ordinate of top left of the rectangle. Default is 0.
y - y-axis co-ordinate of top left of the rectangle. Default is 0.
width - width of the rectangle.
height - height of the rectangle.
rx - used to round the corner of the rounded rectangle.
ry - used to round the corner of the rounded rectangle.
Example:
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >
38. How to draw a circle in SVG?
'circle' tag of SVG is used to draw a circle. Following are the commonly used attributes -
cx - x-axis co-ordinate of the center of the circle. Default is 0.
cy - y-axis co-ordinate of the center of the circle. Default is 0.
r - radius of the circle.
Example:
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >
39. How to draw a ellipse in SVG?
'ellipse' tag of SVG is used to draw a ellipse. Following are the commonly used attributes -
cx - x-axis co-ordinate of the center of the ellipse. Default is 0.
cy - y-axis co-ordinate of the center of the ellipse. Default is 0.
rx - x-axis radius of the ellipse.
ry - y-axis radius of the ellipse.
Example:
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
40. How to draw a line in SVG?
'line' tag of SVG is used to draw a line. Following are the commonly used attributes:
x1 - x-axis co-ordinate of the start point. Default is 0.
y1 - y-axis co-ordinate of the start point. Default is 0.
x2 - x-axis co-ordinate of the end point. Default is 0.
y2 - y-axis co-ordinate of the end point. Default is 0.
Example:
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
41. How to draw a close ended polygon in SVG?
'polygon' tag of SVG is used to draw a polygon. Following is the commonly used attribute -
points - List of points to make up a polygon.
Example:
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
42. How to draw a open ended polygon in SVG?
'polyline' tag of SVG is used to draw a open ended polygon. Following is the commonly used attribute -
points - List of points to make up a polygon.
Example:
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">
43. How to draw a free flow path in SVG?
'path' tag of SVG is used to draw a free flow path. Following is the commonly used attribute -
d - path data,usually a set of commands like moveto, lineto etc.
Example:
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
44. Which command of path element moves cursor from one point to another point?
M command of path element move from one point to another point.
45. Which command of path element creates a line?
L command of path element creates a line.
Read More Questions:
SVG Interview Questions Part1
SVG Interview Questions Part2
SVG Interview Questions Part3
Yes! SVG supports JavaScript/ECMAScript functions. Script block is to be in CDATA block consider character data support in XML.
32. Are mouse events, keyboard events supported in SVG?
Yes! SVG elements support mouse events, keyboard events. We've used onClick event to call a javascript functions.
33. How to get a SVG document using javascript?
In javascript functions, document represents SVG document and can be used to get the SVG elements.
34. How to get a active SVG element using javascript?
In javascript functions, event represents current event and can be used to get the target element on which event got raised.
35. Which element of SVG is used to create links?
<a> element is used to create hyperlink. "xlink:href" attribute is used to pass the IRI
InternationalizedResourceIdentifiers which is complementary to URI UniformResourceIdentifiers.
36. How will you embed an SVG image in HTML page?
SVG image can be embedded using following ways -
using embed tag
using object tag
using iframe
37. How to draw a rectangle in SVG?
'rect' tag of SVG is used to draw a rectangle. Following are the commonly used attributes -
x - x-axis co-ordinate of top left of the rectangle. Default is 0.
y - y-axis co-ordinate of top left of the rectangle. Default is 0.
width - width of the rectangle.
height - height of the rectangle.
rx - used to round the corner of the rounded rectangle.
ry - used to round the corner of the rounded rectangle.
Example:
<rect
x = "100" y = "30"
width = "300" height = "100"
style = "fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" >
38. How to draw a circle in SVG?
'circle' tag of SVG is used to draw a circle. Following are the commonly used attributes -
cx - x-axis co-ordinate of the center of the circle. Default is 0.
cy - y-axis co-ordinate of the center of the circle. Default is 0.
r - radius of the circle.
Example:
<circle
cx = "100" cy = "100" r = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)" >
39. How to draw a ellipse in SVG?
'ellipse' tag of SVG is used to draw a ellipse. Following are the commonly used attributes -
cx - x-axis co-ordinate of the center of the ellipse. Default is 0.
cy - y-axis co-ordinate of the center of the ellipse. Default is 0.
rx - x-axis radius of the ellipse.
ry - y-axis radius of the ellipse.
Example:
<ellipse
cx = "100" cy = "100"
rx = "90" ry = "50"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
40. How to draw a line in SVG?
'line' tag of SVG is used to draw a line. Following are the commonly used attributes:
x1 - x-axis co-ordinate of the start point. Default is 0.
y1 - y-axis co-ordinate of the start point. Default is 0.
x2 - x-axis co-ordinate of the end point. Default is 0.
y2 - y-axis co-ordinate of the end point. Default is 0.
Example:
<line
x1 = "20" y1 = "20"
x2 = "150" y2 = "150"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
41. How to draw a close ended polygon in SVG?
'polygon' tag of SVG is used to draw a polygon. Following is the commonly used attribute -
points - List of points to make up a polygon.
Example:
<polygon
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
42. How to draw a open ended polygon in SVG?
'polyline' tag of SVG is used to draw a open ended polygon. Following is the commonly used attribute -
points - List of points to make up a polygon.
Example:
<polyline
points = "150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5"
stroke = "black"
stroke-width = "3"
fill = "none">
43. How to draw a free flow path in SVG?
'path' tag of SVG is used to draw a free flow path. Following is the commonly used attribute -
d - path data,usually a set of commands like moveto, lineto etc.
Example:
<path
d = "M 100 100 L 300 100 L 200 300 z"
stroke = "black"
stroke-width = "3"
fill = "rgb(121,0,121)">
44. Which command of path element moves cursor from one point to another point?
M command of path element move from one point to another point.
45. Which command of path element creates a line?
L command of path element creates a line.
Read More Questions:
SVG Interview Questions Part1
SVG Interview Questions Part2
No comments:
Post a Comment