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 :)
I have created simple force chart in D3.js.
There are nodes and between nodes there are links with the markers in the middle (using marked-mid).
The problem is that for some reason on Chrome this marker is rendered 3 times instead 1. On IE and FF it works good.
Below I'm posting code only in SVG as this is I think path issue not connected to D3.js.
<svg class="baseSVG" style="width: 100%; height: 90%;">
<g class="chart_wrapper">
<g class="links">
<g class="link_wrapper">
<path class="link hate" marker-mid="url(#arrow)" d="M 342.9891277180959 320.7671874251745 A 190.7182256881292 190.7182256881292 0 0 1 225.76595293193114 281.82896265692517 A 190.7182256881292 190.7182256881292 0 0 1 156.98831902253903 179.22732948826612"></path>
</g>
</g>
<g id="person0" class="node person Adam" transform="translate(156.98831902253903,179.22732948826612)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Adam</text>
</g>
</g>
<g id="person1" class="node person Eve" transform="translate(342.9891277180959,320.7671874251745)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Eve</text>
</g>
</g>
<g id="person2" class="node person Kazik" transform="translate(179.355374155828,342.83615430106596)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Kazik</text>
</g>
</g>
<g id="person3" class="node person Janina" transform="translate(320.66071665952427,157.09136472857676)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Janina</text>
</g>
</g>
</g>
<defs>
<marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
<path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
<path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
</marker>
</defs>
<defs></defs>
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<defs></defs>
</svg>
Example in JSFiddle
If someone is looking for an answer.
#theOneGuy and #echonax were right. To fix is that I can't use marker-mid and instead use marker-start.
So instead of one path definition that show line with marker-mid I have two paths that meet on the chart creating one line. Second path have marker-start.
Marker start because on second path because it need to be on top in terms of z-index.
<svg class="baseSVG" style="width: 100%; height: 90%;">
<g class="chart_wrapper">
<g class="links">
<g class="link_wrapper">
<path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path>
<path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path>
</g>
<g class="link_wrapper">
<path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path>
<path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path>
</g>
<g class="link_wrapper">
<path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path>
<path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path>
</g>
</g>
<g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Adam</text>
</g>
</g>
<g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Eve</text>
</g>
</g>
<g id="person2" class="node person Kazik" transform="translate(289.2970047078608,367.65475135214126)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Kazik</text>
</g>
</g>
<g id="person3" class="node person Janina" transform="translate(226.0636547128077,127.42597160431035)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Janina</text>
</g>
</g>
</g>
<defs>
<marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
<path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
<path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
</marker>
</defs>
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
</svg>
Also I have updated Js Fiddle
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.