how to import and display 'svg' file in react native - javascript
I have an svg file:
<svg xmlns="http://www.w3.org/2000/svg" width="260.346" height="65.709" viewBox="0 0 260.346 65.709">
<g id="logo" transform="translate(-0.763 -0.949)">
<path id="text" d="M229.184,75.248h2.56V57.7h-2.56ZM236.318,57.7V75.248H238.7V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.038-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461l12.428,13.148h2.436V57.7h-2.386V70.513a5.447,5.447,0,0,0,.025.547c.016.174.032.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.46-.319-.344-.534-.559L238.877,57.7h-2.56Zm21.5,13.994q.2.274.547.721a5.807,5.807,0,0,0,.969.944,8.765,8.765,0,0,0,1.566.97,11.736,11.736,0,0,0,2.286.82,15.145,15.145,0,0,0,2.187.385,21.478,21.478,0,0,0,2.336.138,14.858,14.858,0,0,0,4.7-.66,5.831,5.831,0,0,0,3.008-2.124,4.4,4.4,0,0,0,.733-1.6,6.733,6.733,0,0,0,.162-1.329,4.472,4.472,0,0,0-.361-1.877A4.064,4.064,0,0,0,275,66.76a4.946,4.946,0,0,0-1.292-.857,7.934,7.934,0,0,0-1.428-.5q-.563-.123-1.132-.212t-1.13-.136q-1.193-.125-2.374-.224t-2.373-.224A14.071,14.071,0,0,1,263.3,64.3a2.233,2.233,0,0,1-1.18-.708,1.929,1.929,0,0,1-.522-1.342,2.469,2.469,0,0,1,.323-1.157,2.645,2.645,0,0,1,1.243-1.055,6.374,6.374,0,0,1,1.976-.56,16.76,16.76,0,0,1,2.25-.161,12.99,12.99,0,0,1,2.832.31,7.14,7.14,0,0,1,2.587,1.157,3.915,3.915,0,0,1,.533.434c.14.142.3.3.486.486l2.262-.92a8.9,8.9,0,0,0-.746-.92,6.5,6.5,0,0,0-1.019-.845,9.107,9.107,0,0,0-3.331-1.405,18.5,18.5,0,0,0-3.654-.36q-.4,0-1.168.037a14.786,14.786,0,0,0-1.678.187,12.784,12.784,0,0,0-1.864.459,6.156,6.156,0,0,0-1.74.883,4.55,4.55,0,0,0-1.279,1.441,4.19,4.19,0,0,0-.5,2.113,5.167,5.167,0,0,0,.224,1.4,3.439,3.439,0,0,0,1.019,1.529,4.4,4.4,0,0,0,1.081.721,6.489,6.489,0,0,0,1.4.447,18.178,18.178,0,0,0,1.975.285q1.156.112,2.8.262,1.316.1,2.448.235a9.426,9.426,0,0,1,1.977.436,3.193,3.193,0,0,1,1.329.832,2.087,2.087,0,0,1,.486,1.455,2.944,2.944,0,0,1-1.53,2.585,8.333,8.333,0,0,1-4.436.969,16.324,16.324,0,0,1-3.43-.361,8.632,8.632,0,0,1-3.132-1.354,8.089,8.089,0,0,1-.759-.585,4.038,4.038,0,0,1-.459-.484l-2.287.945ZM279.961,57.7V68.016q0,.746.049,1.528a6.422,6.422,0,0,0,.3,1.554,5.5,5.5,0,0,0,.771,1.5,5.923,5.923,0,0,0,1.441,1.38,8.27,8.27,0,0,0,3.1,1.342,16.711,16.711,0,0,0,3.392.348,13.39,13.39,0,0,0,3.841-.461,9.668,9.668,0,0,0,2.423-1.055,5.418,5.418,0,0,0,1.554-1.4,5.959,5.959,0,0,0,.8-1.541,5.751,5.751,0,0,0,.3-1.541q.037-.757.036-1.428V57.7h-2.51V68.438q0,.546-.036,1.144a4.109,4.109,0,0,1-.249,1.168,3.518,3.518,0,0,1-.671,1.094,3.714,3.714,0,0,1-1.306.895,7.447,7.447,0,0,1-1.8.558,12.193,12.193,0,0,1-2.35.212,11.958,11.958,0,0,1-1.839-.124,9.34,9.34,0,0,1-1.379-.311,5.422,5.422,0,0,1-.969-.4q-.321-.173-.634-.36a3.924,3.924,0,0,1-.906-.784,3.137,3.137,0,0,1-.522-.919,4.576,4.576,0,0,1-.248-1.119,13.389,13.389,0,0,1-.063-1.379V57.7h-2.51Zm34.747,2.113q.435,0,.87.025a3.787,3.787,0,0,1,.87.149,2.728,2.728,0,0,1,.8.385,2.529,2.529,0,0,1,.671.734,2.74,2.74,0,0,1,.4.881,3.909,3.909,0,0,1,.125.982,3.81,3.81,0,0,1-.125.956,2.341,2.341,0,0,1-.472.908,2.729,2.729,0,0,1-.87.77,4,4,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V59.814h9.644ZM302.6,75.248h2.485V68.239h8.475l5.941,7.009h3.256L316.3,67.841q.447-.074,1.231-.273a5.1,5.1,0,0,0,1.566-.721,4.557,4.557,0,0,0,1.354-1.467,4.806,4.806,0,0,0,.572-2.51,5.55,5.55,0,0,0-.161-1.4,4.956,4.956,0,0,0-.411-1.069,5.167,5.167,0,0,0-.509-.782,3.131,3.131,0,0,0-.486-.5,4.718,4.718,0,0,0-1.193-.808,6.124,6.124,0,0,0-1.254-.422,7.371,7.371,0,0,0-1.268-.161q-.6-.024-1.206-.025H302.6V75.248Zm35.145-6.363h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.133-.307.2-.472q.074-.2.136-.373c.042-.116.079-.232.113-.348.034.116.066.228.1.335s.066.221.1.336c.066.149.128.3.186.447a3.683,3.683,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.137-4.325h10.787l2.138,4.325h2.858l-9-17.573h-2.634l-9.072,17.573ZM346.274,57.7V75.248h2.386V62.6c0-.249-.009-.481-.025-.7s-.03-.43-.039-.646q-.018-.386-.061-.771c.132.165.244.31.335.434s.187.246.287.361.206.235.323.359.256.278.423.461L362.33,75.248h2.436V57.7H362.38V70.513a5.45,5.45,0,0,0,.025.547c.016.174.033.361.05.56s.041.456.074.771c-.216-.265-.395-.481-.535-.646s-.274-.323-.4-.472-.263-.309-.4-.46-.319-.344-.533-.559L348.834,57.7h-2.56ZM386.711,69.88a6.914,6.914,0,0,1-.633.981,6.061,6.061,0,0,1-1.132,1.132,7.478,7.478,0,0,1-2.187,1.068,11.081,11.081,0,0,1-3.405.447,10.9,10.9,0,0,1-3.952-.659,6.633,6.633,0,0,1-2.436-1.578,6.16,6.16,0,0,1-1.417-2.386,8.838,8.838,0,0,1-.4-2.61,6.865,6.865,0,0,1,.671-3.17,6.094,6.094,0,0,1,1.79-2.138,7.479,7.479,0,0,1,2.573-1.218,11.778,11.778,0,0,1,3.019-.385,10.828,10.828,0,0,1,3.046.4,8.126,8.126,0,0,1,2.149.919,4.731,4.731,0,0,1,1.218,1.094,11.393,11.393,0,0,1,.7,1.069l2.684-.6q-.21-.359-.434-.709a8.564,8.564,0,0,0-.646-.87,9.585,9.585,0,0,0-.908-.931,9.319,9.319,0,0,0-1.218-.92,9.061,9.061,0,0,0-1.864-.87,14.471,14.471,0,0,0-1.889-.5,14.041,14.041,0,0,0-1.69-.224q-.62-.044-1.243-.05a14.614,14.614,0,0,0-2.945.26,12.37,12.37,0,0,0-2.138.621,7.9,7.9,0,0,0-1.43.734q-.546.373-.82.6a12.416,12.416,0,0,0-1.006.895,7.108,7.108,0,0,0-1.069,1.379,8.2,8.2,0,0,0-.845,1.977,9.681,9.681,0,0,0-.336,2.709,10.049,10.049,0,0,0,.659,3.665,7.946,7.946,0,0,0,1.989,2.958,9.419,9.419,0,0,0,3.33,1.977,13.84,13.84,0,0,0,4.684.721q.847,0,1.69-.088a16.152,16.152,0,0,0,1.814-.285,13.518,13.518,0,0,0,1.828-.535,9.088,9.088,0,0,0,1.726-.857,9.2,9.2,0,0,0,1.118-.845,8.01,8.01,0,0,0,.833-.858,7.465,7.465,0,0,0,.633-.882q.274-.447.522-.895Zm5.841,5.369h16.827V73.086H395.037V67.171h13.347V65.107H395.037V59.863h13.72V57.7H392.552ZM229.209,48.933h2.336V38q0-1.044-.012-1.679-.01-.54-.038-1.08-.021-.411-.063-.82c-.023-.249-.053-.538-.086-.87q.175.483.373.958.174.408.361.845t.422.943q.234.511.608,1.256L238.6,48.932h2.287l5.99-12.378c.165-.348.307-.642.423-.883q.163-.338.311-.683c.091-.215.181-.436.274-.66s.194-.509.31-.857q-.067.49-.113.982t-.061.993q-.028.671-.037,1.342-.015,1.026-.013,2.051V48.932h2.337V31.385h-3.38l-5.543,11.508q-.252.548-.509,1.093c-.142.3-.266.584-.373.858s-.217.554-.323.844-.237.644-.386,1.057c-.165-.414-.307-.766-.422-1.057s-.228-.567-.335-.832q-.18-.438-.373-.87-.268-.59-.56-1.168l-5.468-11.433h-3.43V48.932Zm25.178,0h2.56V31.385h-2.56Zm7.134-17.548V48.933h2.386V36.281c0-.248-.009-.481-.025-.7s-.03-.431-.038-.646q-.018-.386-.061-.771c.132.165.244.312.335.434s.187.246.287.361.206.235.323.361.256.277.423.459l12.428,13.148h2.436V31.385h-2.386V44.2a5.443,5.443,0,0,0,.025.545c.016.175.032.361.05.56s.041.456.074.77c-.216-.265-.395-.481-.535-.646s-.273-.323-.4-.472-.263-.309-.4-.461-.319-.344-.534-.558L264.08,31.385h-2.56Zm23.138,17.548h16.827V46.77H287.144V40.854h13.347V38.792H287.144V33.547h13.72V31.385h-16.2V48.932ZM316.8,33.5c.282,0,.572.009.87.025a3.769,3.769,0,0,1,.87.149,2.689,2.689,0,0,1,.8.386,2.513,2.513,0,0,1,.671.732,2.754,2.754,0,0,1,.4.882,3.837,3.837,0,0,1,0,1.94,2.346,2.346,0,0,1-.472.906,2.73,2.73,0,0,1-.87.771,4.005,4.005,0,0,1-1.044.4,6.126,6.126,0,0,1-1.105.149q-.541.024-1.082.025h-8.674V33.5H316.8Zm-12.1,15.435h2.485V41.923h8.475l5.941,7.009h3.256l-6.462-7.407q.447-.075,1.231-.274a5.1,5.1,0,0,0,1.566-.72,4.561,4.561,0,0,0,1.354-1.467,4.807,4.807,0,0,0,.572-2.51,5.534,5.534,0,0,0-.161-1.4,4.948,4.948,0,0,0-.411-1.07,5.178,5.178,0,0,0-.509-.782,3.149,3.149,0,0,0-.486-.5,4.684,4.684,0,0,0-1.193-.807,5.953,5.953,0,0,0-1.254-.422,7.233,7.233,0,0,0-1.268-.162q-.6-.024-1.206-.025h-11.93V48.932Zm30.845-4.3q-.149.323-.248.533a3.528,3.528,0,0,0-.162.411c-.041.133-.077.273-.111.422s-.075.332-.125.547a10.278,10.278,0,0,0-.361-1.118q-.092-.239-.2-.472-.137-.3-.285-.6L327.93,31.385h-2.759L333.6,48.932h2.51l8.277-17.547H341.65l-6.114,13.248Zm23.811-2.063h-8.674l3.7-7.282c.082-.165.156-.323.224-.472s.132-.307.2-.472c.05-.133.095-.257.136-.373s.079-.233.113-.348c.032.115.066.228.1.335l.1.336c.066.149.127.3.186.447a3.634,3.634,0,0,0,.212.447l3.7,7.382Zm-14.639,6.363h2.784l2.138-4.325h10.787l2.138,4.325h2.858l-9-17.572H353.78l-9.072,17.573Z" transform="translate(-148.27 -19.74)" fill="#fff"/>
<path id="bg" d="M.763.949H66.472V66.658H.763Z" fill="#082240" fill-rule="evenodd"/>
<g id="Group_1" data-name="Group 1" transform="translate(-2.092 0.96)">
<path id="Path_4" data-name="Path 4" d="M128.559,49.729h4.208v4.208h-4.208Z" transform="translate(-79.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_5" data-name="Path 5" d="M128.559,49.729h24.208v4.208H128.559Z" transform="translate(-109.953 -34.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_6" data-name="Path 6" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-79.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_7" data-name="Path 7" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-89.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_8" data-name="Path 8" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-99.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
<path id="Path_9" data-name="Path 9" d="M128.559,49.729h4.208V75.285h-4.208Z" transform="translate(-109.953 -24.664)" fill="#fff" fill-rule="evenodd"/>
</g>
</g>
</svg>
My problem it's that I can't import the svg like this:
import Svg from "../assets/svg.svg";
And display it's in the jsx like react:
<div>
<Svg />
</div>
Now, I import my svg as functional component and display inside the Jsx:
<View style={styles.footerLogo}>
<Text style={styles.footerText}>
Developed by <Svg /> // Svg its a functional component.
</Text>
</View>
My question is, How can I import svg as local file and display it in my code?
React-Native doesn't support SVG files directly. You can use this svg support library.
https://github.com/kristerkari/react-native-svg-transformer
I needed to import the svg as component :
import {Svg as ReactComponent} from '../'
Related
SVG paths and images
I'm trying to add images to SVG paths as the title is saying. I've made the following fiddle, JSFiddle I'd like to put images within the paths, like so, (Green dots representing images) so image How would this be done? I tried adding images to the path, but they just didn't show up, obviously. Code: <svg width="175" height="175"> <g transform="translate(87.5,87.5)"> <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path> <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path> <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path> <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path> <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path> </g> </svg>
Following the picture, you need to add 5 circles. Each circle is rotated relative to the other by the same angle - 360/5 = 72 Create the first circle: <defs> <circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" /> </defs> Use the command <use> to clone the circle and rotate it transform =" rotate (deg x y) " to the desired angle relative to the first circle. <svg width="175" height="175" > <defs> <circle id="greenCircle" cx="13" cy="98" r="10" fill="#B6FF00" /> </defs> <g transform="translate(87.5,87.5)"> <path fill="#1f77b4" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#aec7e8" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#ff7f0e" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#ffbb78" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#2ca02c" d="M5.357829746269671e-15,-87.5L3.949485927250214e-15,-64.5Z"></path> <path fill="#98df8a" d="M5.357829746269671e-15,-87.5A87.5,87.5,0,0,1,83.21744517582593,-27.038987007807897L61.3431453010374,-19.93159613718411A64.5,64.5,0,0,0,3.949485927250214e-15,-64.5Z"></path> <path fill="#d62728" d="M83.21744517582593,-27.038987007807897A87.5,87.5,0,0,1,51.4312095755914,70.7889870078079L37.91214877286452,52.18159613718411A64.5,64.5,0,0,0,61.3431453010374,-19.93159613718411Z"></path> <path fill="#ff9896" d="M51.4312095755914,70.7889870078079A87.5,87.5,0,0,1,-51.43120957559139,70.7889870078079L-37.91214877286451,52.18159613718411A64.5,64.5,0,0,0,37.91214877286452,52.18159613718411Z"></path> <path fill="#9467bd" d="M-51.43120957559139,70.7889870078079A87.5,87.5,0,0,1,-83.21744517582594,-27.038987007807886L-61.34314530103741,-19.9315961371841A64.5,64.5,0,0,0,-37.91214877286451,52.18159613718411Z"></path> <path fill="#c5b0d5" d="M-83.21744517582594,-27.038987007807886A87.5,87.5,0,0,1,-1.607348923880901e-14,-87.5L-1.1848457781750641e-14,-64.5A64.5,64.5,0,0,0,-61.34314530103741,-19.9315961371841Z"></path> </g> <use xlink:href="#greenCircle" transform="rotate(-10 87.5 87.5)" /> <use xlink:href="#greenCircle" transform="rotate(62 87.5 87.5)" /> <use xlink:href="#greenCircle" transform="rotate(134 87.5 87.5)" /> <use xlink:href="#greenCircle" transform="rotate(206 87.5 87.5)" /> <use xlink:href="#greenCircle" transform="rotate(278 87.5 87.5)" /> </svg>
Here's a hint, add this to your fiddle: <circle cx="0" cy="0" r="10" fill="#12345"></circle>
Use tag in svg's not working
I'm pretty new to SVG. I have set of icons created using SVG. I'm trying to use <use> tag to render a particular part of SVG. But everything goes in vain. Not able to figure out what's the mistake i'm doing. Here is the code which i tried and also refer the fiddle. You can see that overall svg is rendered, But trying to render particular part of the SVG failed. Any help will be appreciated <svg width="303px" height="30px" viewBox="0 0 303 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Pivot" transform="translate(253.232000, 6.247500)"> <path d="M0.833,15.4105 L0.833,11.662 L3.7485,11.662 L3.7485,11.2455 L0.833,11.2455 L0.833,7.9135 L3.7485,7.9135 L3.7485,7.497 L0.833,7.497 L0.833,4.5815 L0,4.5815 L0,16.2435 L0.833,16.2435 L0.833,15.827 L3.7485,15.827 L3.7485,15.4105 L0.833,15.4105 Z M18.8036328,16.2435 L4.5815,16.2435 L4.5815,15.6124537 L8.7465,15.6124537 L8.7465,12.7095463 L4.5815,12.7095463 L4.5815,12.0785 L8.7465,12.0785 L8.7465,8.12804634 L4.5815,8.12804634 L4.5815,7.497 L8.7465,7.497 L8.7465,4.5815 L3.7485,4.5815 L3.7485,4.4408921e-16 L19.5755,4.4408921e-16 L19.5755,4.5815 L17.3516962,4.5815 L14.5775,4.5815 L14.5775,7.497 L18.7425,7.497 L18.7425,4.5815 L19.5755,4.5815 L19.5755,16.2435 L18.8036328,16.2435 Z M18.7425,15.6124537 L14.5775,15.6124537 L14.5775,12.7095463 L18.7425,12.7095463 L18.7425,15.6124537 Z M18.7425,12.0785 L14.5775,12.0785 L14.5775,8.12804634 L18.7425,8.12804634 L18.7425,12.0785 Z M13.7445,4.5815 L9.5795,4.5815 L9.5795,7.497 L13.7445,7.497 L13.7445,4.5815 Z M13.7445,8.12804634 L9.5795,8.12804634 L9.5795,12.0785 L13.7445,12.0785 L13.7445,8.12804634 Z M13.7445,12.7095463 L9.5795,12.7095463 L9.5795,15.6124537 L13.7445,15.6124537 L13.7445,12.7095463 Z M3.7485,4.5815 L4.5815,4.5815 L4.5815,16.2435 L3.7485,16.2435 L3.7485,4.5815 Z M0,3.7485 L3.7485,3.7485 L3.7485,4.165 L0,4.165 L0,3.7485 Z" id="Combined-Shape" fill="#AAAAAA"></path> <rect id="Rectangle-324" fill="#FAC10C" x="0" y="3.7485" width="4.5815" height="12.495"></rect> <rect id="Rectangle-324-Copy" fill="#FAC10C" transform="translate(11.733102, 2.290750) rotate(90.000000) translate(-11.733102, -2.290750) " x="9.44235203" y="-5.73533321" width="4.5815" height="16.0521664"></rect> </g> <g id="Filter" transform="translate(232.407000, 6.247500)"> <rect id="Rectangle-108" fill="#3BA3F8" x="4.73505679e-14" y="0" width="12.9115" height="1.2495"></rect> <rect id="Rectangle-109" fill="#3BA3F8" x="4.73505679e-14" y="2.499" width="12.9115" height="1.2495"></rect> <path d="M6.33160096,10.829 L6.45575,10.9678333 L6.57989904,10.829 L6.33160096,10.829 Z M4.8418125,9.163 L4.73505679e-14,3.7485 L12.9115,3.7485 L8.0696875,9.163 L4.8418125,9.163 Z" id="Combined-Shape" fill="#8EC9FB"></path> <path d="M4.5815,9.163 L7.9135,9.163 L7.9135,18.326 L4.74601819,14.5516554 L4.5815,9.163 Z" id="Rectangle-111" fill="#8EC9FB"></path> </g> <g id="Sort" transform="translate(206.167500, 1.666000)"> <rect id="Rectangle-120" fill="#E2A364" x="10.829" y="4.165" width="2.0825" height="17.9095"></rect> <path d="M15.5828281,14.5775 L17.1391718,15.7502891 L12.3853437,22.0588321 L10.829,20.886043 L15.5828281,14.5775 Z" id="Rectangle-121" fill="#E2A364"></path> <text id="A" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C"> <tspan x="0.4165" y="11">A</tspan> </text> <text id="Z" font-family="SFUIDisplay-Semibold, SF UI Display" font-size="11.902719" font-weight="500" letter-spacing="-0.107586779" fill="#19AF5C"> <tspan x="0.4165" y="22.662">Z</tspan> </text> </g> </svg> <svg> <use xlink:href="Pivot"></use> </svg>
You want to know why the "Pivot" element is not showing up in your second SVG? Is that right?
The reason is because you are not referencing it correctly. You should have written:
<svg>
<use xlink:href="#Pivot"></use>
</svg>
Note the missing hash ("#") symbol.
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.
SVG linking rect in different SVG files and animate them
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="'Dialog'" 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 :))
How so create complex SVG shapes using D3JS?
I am trying to customize one of the D3 JS samples but am stuck on how to add complex graphics to it. This is the script I am trying to modify: http://bl.ocks.org/jmgimeno/1665141 I want to add better graphics for the handler at the bottom. Something like how the iPhone video edit control looks like: http://bit.ly/ZDjnOq Now, I guess, the only option to do that would be to use complex SVG graphics. So I created a SVG file for a graphics control that looks similar to iPhone control. My SVG file looks like this: <?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="37.5px" height="20.25px" viewBox="0 0 37.5 20.25" enable-background="new 0 0 37.5 20.25" xml:space="preserve"> <g id="Layer_2"> </g> <g id="Layer_1"> <path fill="none" stroke="#F28A1A" stroke-miterlimit="10" d="M34.442,15.665c0,1.565-1.27,2.835-2.835,2.835H5.594 c-1.565,0-2.835-1.27-2.835-2.835V3.834C2.759,2.269,4.028,1,5.594,1h26.014c1.565,0,2.835,1.269,2.835,2.834V15.665z"/> <g> <path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M4.342,12.298 c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0 c0.875,0,1.584,0.709,1.584,1.583V12.298z"/> <line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="9.715" x2="3.466" y2="9.715"/> <line id="XMLID_16_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="8.976" x2="3.466" y2="8.976"/> <line id="XMLID_15_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="1.883" y1="10.369" x2="3.466" y2="10.369"/> </g> <g> <path fill="#FFFFFF" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" d="M36.025,12.298 c0,0.874-0.709,1.583-1.584,1.583l0,0c-0.874,0-1.583-0.709-1.583-1.583V7.131c0-0.874,0.709-1.583,1.583-1.583l0,0 c0.875,0,1.584,0.709,1.584,1.583V12.298z"/> <line fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="9.715" x2="35.149" y2="9.715"/> <line id="XMLID_14_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="8.976" x2="35.149" y2="8.976"/> <line id="XMLID_13_" fill="none" stroke="#626161" stroke-width="0.25" stroke-miterlimit="10" x1="33.566" y1="10.369" x2="35.149" y2="10.369"/> </g> </g> </svg> Somehow, I am not able to see the SVG graphics when I use the above code. Do I need some simpler form of the SVG? or is there something more to it.
The complex paths can be rendered by putting the svg element information into arrays that d3 can use as data: http://bl.ocks.org/AndrewStaroscik/5220771