Errata

Building Web Applications with SVG

Errata for Building Web Applications with SVG

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
PDF Page 14
Example 8 source code

In example 8 the minute hand is not correctly aligned with the centre of the clock.

In the code:

<rect x="49.75%" y="20%" rx="5" ry="5" width="1%" height="30%" stroke="blue" fill="url(#hand)" stroke-width="1.5"/>

the x and width parameters are mismatched. To maintain the current width of 1% the x value should be changed to 49.5%.

 Anonymous  Mar 15, 2014 
Printed Page 16
First para

No URL is provided for the example (Example 9).

 Marcus Crowley  Mar 20, 2014 
Printed Page 33
Table 2-1, first row, second column, third line

The second sentence contains
HSL (e.g., "rgb(100%,50%,90%)"),%)
If SVG supports HSL, the example should be changed; otherwise the whole string could be safely removed.

 Anonymous  Sep 16, 2012 
PDF, ePub Page 34
section "Rectangles"

in the image of the rectangle the label for "ry" is missing and it is unclear that "rx" is the label for the horizontal line

 my_oreilly  Nov 29, 2012 
PDF, ePub Page 35
section "Ellipses"

1) in the image of the ellipse, the "rx" and "ry" labels are reversed.
2) in the markup "cx" and "cy" do not match the image

 my_oreilly  Nov 29, 2012 
PDF, ePub Page 48
SVG markup

The <svg> markup does not produce the image shown
Also, to render the markup in a browser you would need the xmlns attribute of the <svg> tag.

 my_oreilly  Nov 29, 2012 
Printed Page 54
top of page

Request for clarification:

when reusing the rectangles why are you doing a rotate and not simply a translate?

Substituting a translation seems to work, is there some issue that I am missing?

thanks

 Tom Skinner  Feb 09, 2014 
PDF Page 57
Lower part

The code provided has an error. See below

</g> NOTE: This line should be removed.
<pattern id="gridPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M10 0 L0 0 L0 10" fill='none' stroke='gray' stroke-width='0.25'/>
</pattern>
</defs>
<g id="layer1">

 Anonymous  Aug 01, 2012 
Printed Page 57
Middle

There is an extra XML comment termination just below the middle of the page.

... C 20,20 0,0 0,0" -->

-->
<!-- Reuse the first path ...

 Anonymous  Sep 16, 2012 
PDF Page 77
the masked text image/markup

The text in the <text> element in the markup is:

"The Masked Text: it o"

but in the actual SVG the markup is;

"Some Masked Text: it outsprawls its mask"

 my_oreilly  Nov 30, 2012 
Printed Page 140
wordsput2 example

There are two problems that affect page 140's wordsput2 example in Google Chrome:

(1) Using viewBox="0 0 1 1" enables a bug in Chrome (versions 8.0.552 to 26.0.1410.64 m), where mouse events on elements small than ~0.5 units are not reported correctly. To avoid this problem, use viewBox="0 0 100 100" and scale the dimensions in function add(o) by x100.

(2) To retrieve the SVG object, first check for contentDocument before attempting getSVGDocument(). For example:
svgObject = document.getElementById('svgObject');
if (svgObject.contentDocument)
svgDoc = svgObject.contentDocument;
else {
try {
svgDoc = svgObject.getSVGDocument();
}
}

 Simon Dismore  May 10, 2013