SVG linking rect in different SVG files and animate them - javascript

I search everywhere and I didn't understand/found how to do what I want.
I Have 2 svg files who represent somes UML diagrams generated by Visual Paradigm for UML, they have similar objects. For exemple 'FileSource.svg' and 'FileDestination.svg', both of them have an object 'A' who is on differents positions for each.
I would like that when you click on 'A' in 'FileSource.svg' that return 'A' in 'FileDestination.svg' with an hightlight on 'A' to see where it's in the diagram 'FileDestination.svg.
Here is the jsfiddle : http://jsfiddle.net/jim987/rJk54/
But I don't find how to create 2 files with jsfiddle, so the linking part don't work..
First I tried to link the similar objects, there is the code for one object in diagram :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="0" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="rgb(0,0,0)" text-rendering="auto" stroke-linecap="square" width="1267" stroke-miterlimit="10" stroke-opacity="0" shape-rendering="auto" fill="rgb(0,0,0)" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="626" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
<defs id="genericDefs"/>
<g>
<defs id="defs1">
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath7">
<path d="M-7 -7 L101 -7 L101 51 L-7 51 L-7 -7 Z"/>
</clipPath>
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath10">
<path d="M0 0 L90 0 L90 15 L0 15 L0 0 Z"/>
</clipPath>
</defs>
<g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
<a xlink:href="FileDestination.svg#A_Object_FileDestination" xlink:title="object definition">
<rect x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)" stroke="none"/>
</a>
</g>
<g font-size="11" stroke-linecap="butt" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" font-weight="bold" stroke-opacity="1" stroke-miterlimit="0">
<rect fill="none" x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)"/>
</g>
<g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" font-weight="bold" stroke-opacity="1">
<a xlink:title="object def">
<text x="21" xml:space="preserve" y="12" clip-path="url(#clipPath10)" stroke="none">Object A</text>
</a>
<line y2="12" fill="none" x1="21" clip-path="url(#clipPath10)" x2="66" y1="12"/>
</g>
</g>
</svg>
Object A in FileDestination.svg :
<g font-size="11" transform="translate(712,44)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
<rect id="A_Object_FileDestination" x="0" width="90" height="40" y="0" clip-path="url(#clipPath13)" stroke="none"/>
</g>
The problem is : when I creates this link my rectangle color become black.. do you know why ?
Also is it possible to link my object with the transform defined ? (I saw it in the doc)
like this :
FileDestination.svg#svgView(transform(translate(712,44)))
Because I added the id for each rectangle, when svg files are generate there isn't any ids, just the transforms.
The translate corresponding at the transform of A in FileDestination, but when I tried it, I just have a blank before my diagram..
And Finally, I have no idea, how to do my animation to target the destination of the link. Certainly in JavaScript or with d3.js ? with actionListener ? but how ? because objects are not in the same page. And I do not how to handle the fact that the objects aren't in the same page.
Thanks by advance for yours answers :))

Related

SVG: Text show to have spacing at top and bottom

I am using a SVG to display a knock-out text template to create a rectangle that has text inside (that comes trough the mask). I want the mask text to match the given size and scale up properly, so that the text in charge does automatically is using the width and height it has for usage.
For longer paragraphs this work just fine but when the Text Content is not so long the logic scales up the text to its maximum width/height until it hits a border. See screenshot. But I do see that there is padding that I want to get rid of - how can I make the Text to fit the container fully?
To make it better visible I added a Text Element directly to the SVG so I can show the sizes of the Element. How can I get rid of this whitespace?
Example with purple boxes that show whitespace in text element
This is an example with a longer text that works as expected:
<svg id="canvas-6" width="300px" height="75px" viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-6" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
<rect id="fit-text-6" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-6)"></rect>
<mask id="knockout-text-6">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-6" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
</mask>
</svg>
This is an example that has the whitespace still inside its SVG canvas:
<svg id="canvas-5" width="300px" height="134px" viewBox="0 0 300 134" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-5" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
<rect id="fit-text-5" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-5)"></rect>
<mask id="knockout-text-5">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-5" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
</mask>
</svg>
Try adding { display: block } on the svg.

Svg circular slider color changing

I have following svg and i want to create a circular slider,
and the problem is i can't found anything related to changing
stroke color of part of image.
<svg width="221px" height="221px" viewBox="0 0 221 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<pattern id="pattern" width="100%" height="100%">
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<use xlink:href="#path-1"></use>
</mask>
</pattern>
<defs>
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="221" height="221" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Final" stroke="none" stroke-width="1" fill="url(#psattern)" fill-rule="evenodd" opacity="0.69921875" stroke-dasharray="1,4">
<g id="voor" transform="translate(-77.000000, -230.000000)" stroke="#F5A623" stroke-width="48">
<g id="fi-strokes" stroke-width="48">
<g id="Gup" transform="translate(0.000000, -44.000000)">
<g id="Gup-5" transform="translate(20.000000, 111.000000)">
<g id="rp-4">
<g id="und" transform="translate(57.000000, 163.000000)">
<g id="reen">
<g id="Dl">
<g id="faded-ts">
<use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
How to change part of image on mouse/touch events to another color?
I tried:
clip-path - i couldn't create smooth color changing.
linear-gradient - same problem
Any Tips?

Calculate SVG.Text Length before drawing [duplicate]

I want to color the background of svg text similar to background-color in css
I was only able to find documentation on fill, which colors the text itself
Is it even possible?
You could use a filter to generate the background.
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>
No this is not possible, SVG elements do not have background-... presentation attributes.
To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);
The solution I have used is:
<svg>
<line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.
A bit of a hack and there are potential issues, but works for me!
Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.
No, you can not add background color to SVG elements. You can do it programmatically with d3.
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");
Answer by Robert Longson (#RobertLongson) with modifications:
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
and we have no bluring and no heavy "getBBox" :)
Padding is provided by white spaces in text-element with filter.
It's worked for me
Going further with #dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.
You can combine filter with the text.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>
For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.
this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
<defs>
<filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
<feFlood flood-color="#00ffff"/>
</filter>
</defs>
<!--Draw the text-->
<use xlink:href="#mygroup" filter="url(#removebackground)" />
<g id="mygroup">
<text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>
<line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/>
<line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/>
</g>
</svg>
The previous answers relied on doubling up text and lacked sufficient whitespace.
By using atop and I was able to get the results I wanted.
This example also includes arrows, a common use case for SVG text labels:
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>
An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).
For me, this was the only way to make the text readable in Safari.
<svg width="100%" height="100%">
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" />
</filter>
<g transform="translate(20, 50)" font-size="50">
<text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
<text fill="blue">solid background</text>
</g>
</svg>
The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.
You can add style to your text:
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
White, in this example.
Does not work in IE :)

SVG masks with transformation matrices

Well, basically I have a SVG file which coordinates are calculated taking into account the screen resolution. Nonetheless, I have now a process that sends the SVG to another computer and adjusts each object to the resolution of the receiving computer. For that, I use the transformation matrix as you can see in object "OjeB0J0NzcPolyline1507". Everything went well, until now that I have to deal with masks.
Basically, the mask crops the SVG like if the mask was applied before the transformation and since the mask has a specific size, everything that is outside the mask is cropped. Nonetheless, I have already tried to make the svgjsRubberRect bigger and anything seems to work.
Is there any way to adjust the mask so the whole object is shown with exception to what is covered by the element"OjeB0J0NzcPath1519"
EDIT:
Original SVG:
<g id="canvas">
<polyline fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" > </use>
</mask>
</defs>
</svg>
Scaled SVG:
<svg id="zxjzF2hIO8Svg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="canvas">
<polyline transform="matrix(0.312592 0 0 0.462912 0 0)" fill="none" stroke-width="185" stroke="#000000" stroke-opacity="1" stroke-linecap="round" stroke-linejoin="round" class="svg-selectable svg-editable svg-replaceable" mask="url('#zxjzF2hIO8Mask1276')" points="38,64 38,64 37,64 40,62 49,61 61,59 78,57 98,55 122,51 167,43 203,40 245,34 286,34 343,34 399,34 535,35 606,44 678,54 747,65 821,75 895,82 965,97 1036,103 1101,103 1157,103 1206,103 1252,103 1287,103 1322,95 1363,47 1265,27 1207,23 1159,16 1108,16 1062,14 1016,14 969,14 921,14 883,14 850,14 821,9 803,6 792,4 769,1 775,1 788,1 808,1 833,1 868,1 912,1 955,1 1005,6 1062,6 1296,32 1327,114 1250,123 1170,131 1070,134 960,134 844,134 712,134 580,134 432,134 286,134 152,134 12,134 0,134 0,147 0,158 0,168 0,172 8,172 27,172 51,172 81,172 122,172 157,172 260,172 325,172 398,172 487,172 578,172 665,172 846,179 918,189 1064,208 1125,216 1198,228 1213,233 1220,237 1215,245 1196,249 1154,256 1093,266 1016,277 923,284 707,284 592,284 462,284 330,284 190,284 58,284 0,284 0,286 0,277 0,276 0,275 0,276 3,278 9,282 17,283 47,286 74,286 112,286 161,286 220,286 301,286 482,286 590,286 703,286 946,286 1086,286 1337,298 1265,369 1144,369 1016,363 883,347 756,340 523,324 421,308 345,306 253,306 243,306 269,306 323,306 391,306 480,306 574,306 674,306 777,308 895,308 1104,312 1190,314 1263,314 1320,314 1343,314 1286,314 1217,307 1148,296 1085,288 995,275 981,270 974,266 973,266 973,264 977,261 996,256 1152,236 1217,232 1362,221 1335,214 1282,213 1266,213 1254,213 1242,215 1234,220 1232,225 1232,229 1232,233 1307,244 1364,226 1302,226 1226,226 857,226 654,227 557,232 150,276 68,287 11,306 0,331 0,336 0,337 1,337 3,339 10,339 14,341 19,343 21,343 24,343 26,343 28,343 30,342 33,342 53,342 87,339 219,348 288,354 362,365 428,375 500,386 688,412 733,420 788,429 804,437 804,441 768,456 713,466 547,477 72,477 0,477 0,461 0,454 19,454 71,454 128,454 203,454 295,454 406,452 519,448 1038,499 819,552 719,561 511,565 397,565 279,565 176,565 6,565 0,565 14,568 91,568 142,568 215,568 401,568 604,568 703,568 872,575 935,591" id="2HCqPWHVecPolyline1238"></polyline>
</g>
<defs id="zxjzF2hIO8Defs1001">
<rect id="SvgjsRubberRect" width="800" height="1317" fill="#ffffff" stroke="none" class="svg-reserved svg-rubber svg-replaceable"></rect>
<path id="2HCqPWHVecPath1253" d="M212 177L212 177L217 177L235 179L243 179L268 179L280 179L319 163L362 155L386 155L398 155L496 177L507 182L528 187L560 196L611 211L667 221L677 222L721 228L730 228L762 228L794 229 " fill="none" stroke="black" stroke-linejoin="round" stroke-linecap="round" class="svg-reserved svg-rubber svg-replaceable" transform="matrix(0.312592 0 0 0.462912 0 0)"></path>
<mask id="zxjzF2hIO8Mask1276" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse" class="svg-replaceable">
<use id="zxjzF2hIO8Use1277" xlink:href="#SvgjsRubberRect"></use>
<use id="zxjzF2hIO8Use1278" xlink:href="#2HCqPWHVecPath1253" stroke="#000000" stroke-width="10" transform="matrix(3.19906 0 0 2.16024 0 0)"> </use>
</mask>
</defs>
</svg>

Why does onclick event cause a turn page event in ibook ebook reader?

I am writing an ebook for the apple ibooks app. I am making it an interactive ebook through the use of javascript. I have the javascript working in a browser. And to some degree it works in the apple ibooks app. When I use the onclick event, the function is executed both in the browser and in ibooks. However, in ibooks, it also initiates a page turn event. The onclick event is not seen unless one goes back to the previous page. My javascript is as follows.
//<![CDATA[
function changekey(direction){
//all 12 major keys
var keyArray = ["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];
//12 notes of each major key including non major scale notes
var keyNotes = {C:"C,C#/Db,D,D#/Eb,E,F,F#/Gb,G,G#/Ab,A,A#/Bb,B,C",
Db:"Db,D,Eb,E,F,Gb,G,Ab,A,Bb,B,C,Db",
D:"D,D#/Db,E,F,F#,G,G#/Ab,A,A#/Bb,B,C,C#,D",
Eb:"Eb,F,F#/Gb,G,Ab,A,Bb,B,C,C#/Db,E,Eb",
E:"E,F,F#,G,G#,A,A#/Bb,B,C,C#,D,D#,E",
F:"F,F#/Gb,G,G#/Ab,A,Bb,B,C,C#/Db,D,D#/Eb,E,F",
Gb:"Gb,G,Ab,A,Bb,Cb,C,Db,D,Eb,E,F,Gb",
G:"G,G#/Ab,A,A#/Bb,B,C,C#/Db,D,D#/Eb,E,F,F#,G",
Ab:"Ab,A,Bb,B,C,Db,D,Eb,E,F,F#/Gb,G,Ab",
A:"A,A#/Bb,B,C,C#,D,D#/Eb,E,F,F#,G,G#,A",
Bb:"Bb,B,C,C#/Db,D,Eb,E,F,F#/Gb,G,G#/Ab,A,Bb",
B:"B,C,C#,D,D#,E,F,F#,G,G#,A,A#,B"
};
var currentKey = document.getElementById("MajorScale").innerHTML;
var newNotes = [];
var newKey;
var firstChar;
var secondChar = [];
var secondCharText = [];
if(direction == "down"){
if(keyArray.indexOf(currentKey)==0){
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.length-1];
newKey=keyArray[keyArray.length-1];
} else{
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)-1];
newKey=keyArray[keyArray.indexOf(currentKey)-1];
}
} else if( direction == "up") {
if(keyArray.indexOf(currentKey)==keyArray.length-1){
document.getElementById("MajorScale").innerHTML=keyArray[0];
newKey = keyArray[0];
} else {
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)+1];
newKey = keyArray[keyArray.indexOf(currentKey)+1];
}
}
newNotes = (keyNotes[newKey]).split(",");
for (var nn=0;nn < newNotes.length;nn++){
while (document.getElementById("Note"+(nn+1)).firstChild) {
document.getElementById("Note"+(nn+1)).removeChild(document.getElementById("Note"+(nn+1)).firstChild);
}
firstChar = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
firstChar.setAttributeNS(null,"font-family","Utsaah");
firstChar.setAttributeNS(null,"font-size",25);
var firstCharText = document.createTextNode(newNotes[nn][0]);
firstChar.appendChild(firstCharText);
document.getElementById("Note"+(nn+1)).appendChild(firstChar);
for(i=1;i<newNotes[nn].length;i++){
secondChar[i] = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
if(i==1||i==4){
secondChar[i].setAttributeNS(null,"font-family","OpusText");
} else {
secondChar[i].setAttributeNS(null,"font-family","Utsaah");
}
secondChar[i].setAttributeNS(null,"font-size",25);
secondCharText[i] = document.createTextNode(newNotes[nn][i]);
secondChar[i].appendChild(secondCharText[i]);
document.getElementById("Note"+(nn+1)).appendChild(secondChar[i]);
}
}
}
//]]>
It modifies the following svg files.
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="660px"
height="105px" viewBox="0 0 660 105" enable-background="new 0 0 660 105" xml:space="preserve">
<g id="Layer_1">
<g id="TwelveTones">
<text id="Note1" style="text-anchor: middle" x="030" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
<text id="Note2" style="text-anchor: middle" x="080" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">G</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/A</tspan><tspan x="39.835" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note3" style="text-anchor: middle" x="130" y="50"><tspan font-family="'Utsaah'" font-size="25">A</tspan></text>
<text id="Note4" style="text-anchor: middle" x="180" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">A</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/B</tspan><tspan x="37.845" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note5" style="text-anchor: middle" x="230" y="50"><tspan font-family="'Utsaah'" font-size="25">B</tspan></text>
<text id="Note6" style="text-anchor: middle" x="280" y="50"><tspan font-family="'Utsaah'" font-size="25">C</tspan></text>
<text id="Note7" style="text-anchor: middle" x="330" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">C</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/D</tspan><tspan x="39.822" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note8" style="text-anchor: middle" x="380" y="50"><tspan font-family="'Utsaah'" font-size="25">D</tspan></text>
<text id="Note9" style="text-anchor: middle" x="430" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">D</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/E</tspan><tspan x="38.833" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note10" style="text-anchor: middle" x="480" y="50"><tspan font-family="'Utsaah'" font-size="25">E</tspan></text>
<text id="Note11" style="text-anchor: middle" x="530" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">F</tspan></text>
<text id="Note12" style="text-anchor: middle" x="580" y="50"><tspan font-family="'Utsaah'" font-size="25">F</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan></text>
<text id="Note13" style="text-anchor: middle" x="630" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
</g>
<g id="Aarows">
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M233.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M274.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C269.576,31.006,272.198,30.553,274.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M583.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M624.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C619.576,31.006,622.198,30.553,624.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M37.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M118.521,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C119.992,61.808,118.55,59.571,118.521,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M137.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M218.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C219.992,61.808,218.55,59.571,218.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M287.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M368.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C369.992,61.808,368.55,59.571,368.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M387.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M468.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C469.992,61.808,468.55,59.571,468.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M487.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M568.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C569.992,61.808,568.55,59.571,568.522,57.361z"/>
</g>
</g>
</g>
</g>
</g>
<g id="Steps">
<text transform="matrix(1 0 0 1 71.5527 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 171.5529 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 598.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 248.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 321.5525 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 421.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 521.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
</g>
</svg></p><p>
<svg onclick='changekey("down");' version="1.1" id="downkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#44612B" points="18.27,1.532 1,11.505 18.27,21.478" />
</svg> <span id="MajorScale" display="inline-block" width="150">G</span> Major Scale
<svg version="1.1" onclick='changekey("up");' id="upkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#324DCE" points="1.913,21.478 19.183,11.505 1.913,1.532" />
</svg></p>
</div>
I have tried changing the onclick='changekey("down");' to an ontouchstart and ontouchend event, but those were not recognized within the ibooks app.
The working browser code can be seen here http://jsfiddle.net/slayerofgiants/9772W/1/
And a sample ebook for ibooks can be seen here. The interactive portion is on page 3 and it changes the pages to page 4 or page 2 depending upon which button is tapped. https://www.dropbox.com/s/4x1uex3cbw56c7k/Example.epub
I'm trying to find what is triggering the page turn event and how to disable it for that function.
Thanks,
--christopher
The problem is that your onclick event is also getting passed up to the iBooks application, so it triggers both your code, as well as the default code that handles onclick. If you add return false; to the end of your Javascript function, it should fix it.
This thread explains it a bit more.

Categories