I have an SVG file that was originally created in Visio. It's an electrical diagram. I want to replace one element on this diagram with another that I currently have in a separate file. Here is the original file which shows just one symbol:
And here is its code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generated by Microsoft Visio 11.0, SVG Export, v1.0 SAMPLE.svg Page-1 -->
<svg
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="8.5in"
height="11in"
viewBox="0 0 612 792"
xml:space="preserve"
color-interpolation-filters="sRGB"
class="st6"
version="1.1"
id="svg678"
sodipodi:docname="SAMPLE1.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata684"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs682" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1022"
id="namedview680"
showgrid="false"
inkscape:zoom="2"
inkscape:cx="408"
inkscape:cy="795.24519"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g676" />
<v:documentProperties
v:langID="1033"
v:viewMarkup="false">
<v:userDefs>
<v:ud
v:nameU="msvNoAutoConnect"
v:val="VT0(1):26" />
</v:userDefs>
</v:documentProperties>
<style
type="text/css"
id="style348">
<![CDATA[
.st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
.st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st4 {fill:#000000;font-family:Calibri;font-size:0.499992em}
.st5 {fill:#ffffff}
.st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
]]>
</style>
<g
v:mID="0"
v:index="1"
v:groupContext="foregroundPage"
id="g676">
<title
id="title350">Page-1</title>
<v:pageProperties
v:drawingScale="1"
v:pageScale="1"
v:drawingUnits="0"
v:shadowOffsetX="9"
v:shadowOffsetY="-9" />
<v:layer
v:name="Connector"
v:index="0" />
<v:layer
v:name="Electrical"
v:index="1" />
<g
id="group7-18"
transform="translate(84.24,-648.054)"
v:mID="7"
v:groupContext="group"
v:layerMember="1">
<v:custProps>
<v:cp
v:nameU="SubType"
v:lbl="Switch type"
v:type="1"
v:format="Mushroom Head;Push-Pull Head;Normal"
v:langID="1033"
v:val="VT4(Normal)" />
</v:custProps>
<v:userDefs>
<v:ud
v:nameU="visDescription"
v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" />
<v:ud
v:nameU="visVersion"
v:val="VT0(14):26" />
</v:userDefs>
<title
id="title385">Pushbutton make</title>
<desc
id="desc387">START</desc>
<g
id="shape8-19"
v:mID="8"
v:groupContext="shape"
v:layerMember="1"
transform="translate(11.97,-17.5061)">
<title
id="title389">Sheet.8</title>
</g>
<g
id="shape9-21"
v:mID="9"
v:groupContext="shape"
v:layerMember="1"
transform="translate(0,1.34663)">
<title
id="title392">Sheet.9</title>
<path
d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65 ZM8.98 790.65 A1.49625 1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65 Z"
class="st5"
id="path394" />
<path
d="M10.47 786.61 L25.44 786.61"
class="st2"
id="path396" />
<path
d="M17.96 769.11 L17.96 786.61"
class="st2"
id="path398" />
<path
d="M23.94 790.65 A1.49625 1.34662 0 1 1 26.93 790.65 A1.49625 1.34662 0 1 1 23.94 790.65"
class="st2"
id="path400" />
<path
d="M8.98 790.65 A1.49625 1.34662 0 1 1 11.97 790.65 A1.49625 1.34662 0 1 1 8.98 790.65"
class="st2"
id="path402" />
<path
d="M35.91 790.65 L26.93 790.65"
class="st2"
id="path404" />
<path
d="M0 790.65 L8.98 790.65"
class="st2"
id="path406" />
</g>
<g
id="shape7-29"
v:mID="7"
v:groupContext="groupContent"
v:layerMember="1">
<v:textBlock
v:margins="rect(1,1,1,1)"
v:verticalAlign="0" />
<v:textRect
cx="17.955"
cy="796.602"
width="18.7"
height="9.20349" />
<text
x="10.29"
y="798.4"
class="st4"
v:langID="1033"
id="text409"><v:paragraph
v:horizAlign="1" /><v:tabList />START</text>
</g>
</g>
</g>
</svg>
And here is another to replace with:
And here is its code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
inkscape:version="0.92.3 (2405546, 2018-03-11)"
sodipodi:docname="PushButtonBreak.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2"
inkscape:cx="400"
inkscape:cy="560"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1022"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<g
id="group11-31"
transform="matrix(0.35277777,0,0,0.35277777,100.54167,-119.40724)"
v:mID="11"
v:groupContext="group"
v:layerMember="1">
<v:custProps>
<v:cp
v:nameU="SubType"
v:lbl="Switch type"
v:type="1"
v:format="Mushroom Head;Push-Pull Head;Normal"
v:langID="1033"
v:val="VT4(Normal)" />
</v:custProps>
<v:userDefs>
<v:ud
v:nameU="visDescription"
v:val="VT4(Circuit opening (break). Right-click for mushroom head, push-pull head.)" />
<v:ud
v:nameU="visVersion"
v:val="VT0(14):26" />
</v:userDefs>
<title
id="title413">Pushbutton break</title>
<desc
id="desc415">STOP</desc>
<g
id="shape12-32"
v:mID="12"
v:groupContext="shape"
v:layerMember="1"
transform="translate(12,-17.55)">
<title
id="title417">Sheet.12</title>
</g>
<g
id="shape13-34"
v:mID="13"
v:groupContext="shape"
v:layerMember="1"
transform="translate(0,1.35)">
<title
id="title420">Sheet.13</title>
<path
d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z m -15,0 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0 z"
class="st5"
id="path422"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
<path
d="M 0,790.65 H 9"
class="st2"
id="path424"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="M 36,790.65 H 27"
class="st2"
id="path426"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 10.5,792 h 15"
class="st2"
id="path428"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="M 18,769.05 V 792"
class="st2"
id="path430"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 24,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
class="st2"
id="path432"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
<path
d="m 9,790.65 a 1.5,1.35 0 1 1 3,0 1.5,1.35 0 1 1 -3,0"
class="st2"
id="path434"
inkscape:connector-curvature="0"
style="stroke:#000000;stroke-width:0.23999999;stroke-linecap:round;stroke-linejoin:round" />
</g>
<g
id="shape11-42"
v:mID="11"
v:groupContext="groupContent"
v:layerMember="1">
<v:textBlock
v:margins="rect(1,1,1,1)"
v:verticalAlign="0" />
<v:textRect
cx="18"
cy="796.602"
width="16.12"
height="9.20349" />
<text
x="11.62"
y="798.40002"
class="st4"
v:langID="1033"
id="text437"
style="font-size:5.99990416px;font-family:Calibri;fill:#000000"><v:paragraph
v:horizAlign="1" />
<v:tabList />
STOP</text>
</g>
</g>
</g>
</svg>
I want to know what the appropriate strategy for swapping elements is. Can that be done in pure javascript/jQuery or I need additional libraries?
Thanks for help.
Matching dimensions is a process that SVG has a lot of facilities for. Unfortunately, your files do not use them properly, so a lot of things can go wrong when you copy and paste: wrong positioning of text, wrong text size, wrong line widths, height/width distortions.
There is really no maintainable way around re-engineering the whole thing. You are in luck I have the time. Here is what I would do. It uses the SVG <symbol> element to define reusable templates. Although I have no idea whether Visio can work with them, I've tried to maintain its markup.
For your end result, add attribute xmlns:xlink="http://www.w3.org/1999/xlink" to your complete diagram file. Then copy the <style>, <symbol> elements as its immediate childs. If there already is a <style> in your file, note that they will interact. Be careful with the names of classes, you might need to rename some of them to avoid conflicts.
Look in the markup for
<title>Pushbutton make</title>
elements, and replace their parent <g> element with the <use> element, and, as a first attempt, exchange the transform attribute with that that was part of the <g>. That in no way guarantees that the symbol will now be in the right place, but now you can move the <use> element around by changing the transform attribute until it fits. (You can also use for example Inkscape as an UI for that.)
To exchange the rendered symbol, all you need now is to change the xlink:href attribute to reference either make or break state. The script gives an example how to do that.
var state = true;
setInterval(function () {
state = !state;
var id = "#Pushbutton." + (state ? 'make' : 'break');
document.querySelector('#button1').setAttribute('xlink:href', id);
}, 2000);
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" class="st6">
<v:documentProperties v:viewMarkup="false" v:langID="1033">
<v:userDefs>
<v:ud v:val="VT0(1):26" v:nameU="msvNoAutoConnect" />
</v:userDefs>
</v:documentProperties>
<style>
<![CDATA[
.st1 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.25}
.st2 {stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st3 {fill:#ffffff;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
.st4 {fill:#000000;font-family:Calibri;font-size:0.5em;text-anchor:middle}
.st5 {fill:#ffffff}
.st6 {fill:none;fill-rule:evenodd;font-size:12px;overflow:visible;stroke-linecap:square;stroke-miterlimit:3}
.st7 {fill:#000000;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:0.24}
]]>
</style>
<symbol id="Pushbutton.make" viewBox="0 0 36 30">
<v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
<v:ud v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
<v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
<title>Pushbutton make</title>
<desc>START</desc>
<g>
<title>Sheet.8</title>
</g>
<g>
<title>Sheet.9</title>
<path class="st2" d="M 10.5,17.5 H 25.5" />
<path class="st2" d="M 18,0 V 17.5" />
<path class="st3" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
<path class="st3" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
<path class="st2" d="M 36,21.5 H 27" />
<path class="st2" d="M 0,21.5 H 9" />
</g>
<g>
<v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
<v:textRect height="9.2" width="18.7" cy="26.1" cx="18" />
<text class="st4" y="28" x="18">
<v:paragraph v:horizAlign="0" />
<v:tabList />START</text>
</g>
</symbol>
<symbol id="Pushbutton.break" viewBox="0 0 36 30">
<v:custProps><v:cp v:val="VT4(Normal)" v:langID="1033" v:format="Mushroom Head;Push-Pull Head;Normal" v:type="1" v:lbl="Switch type" v:nameU="SubType" /></v:custProps><v:userDefs>
<v:ud v:val="VT4(Circuit closing (make). Right-click for mushroom head, push-pull head.)" v:nameU="visDescription" />
<v:ud v:val="VT0(14):26" v:nameU="visVersion" /></v:userDefs>
<title>Pushbutton break</title>
<desc>STOP</desc>
<g>
<title>Sheet.8</title>
</g>
<g>
<title>Sheet.9</title>
<path class="st2" d="M 10.5,23 H 25.5" />
<path class="st2" d="M 18,0 V 23" />
<path class="st7" d="M 24,21.5 A 1.5,1.5 0 1 1 27,21.5 1.5,1.5 0 1 1 24,21.5 Z" />
<path class="st7" d="M 9,21.5 A 1.5,1.5 0 1 1 12,21.5 1.5,1.5 0 1 1 9,21.5 Z" />
<path class="st2" d="M 36,21.5 H 27" />
<path class="st2" d="M 0,21.5 H 9" />
</g>
<g>
<v:textBlock v:verticalAlign="0" v:margins="rect(1,1,1,1)" />
<v:textRect height="9.2" width="17.2" cy="26.1" cx="18" />
<text class="st4" y="28" x="18">
<v:paragraph v:horizAlign="0" />
<v:tabList />STOP</text>
</g>
</symbol>
<g>
<title>Page-1</title>
<v:pageProperties v:shadowOffsetY="-9" v:shadowOffsetX="9" v:drawingUnits="0" v:pageScale="1" v:drawingScale="1" />
<v:layer v:index="0" v:name="Connector" />
<v:layer v:index="1" v:name="Electrical" />
<use id="button1" xlink:href="#Pushbutton.break" width="36" height="30" transform="translate(50 50) scale (3)" />
</g>
</svg>
Related
In an SVG file, I need to make the areas where an even number of primitives overlap invisible. Below one works in Chrome but not in Firefox. Is there a better supported way?
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="first" d="M 50 50 L 150 50 L 150 150 z" fill="silver" />
<path id="second" d="M 50 50 L 50 150 L 150 50 z" fill="silver" />
<circle id="third" r="30" cx="100" cy="100" fill="silver" />
<filter id="composite">
<feImage xlink:href="#first" result="f" />
<feImage xlink:href="#second" result="s" />
<feComposite operator="xor" in="f" in2="s" result="fs" />
<feImage xlink:href="#third" result="t" />
<feComposite operator="xor" in="fs" in2="t" />
</filter>
</defs>
<g filter="url(#composite)">
<rect x="0" y="0" width="100%" height="100%" />
</g>
</svg>
I have the following svg, with an arrow. For some reason, it does not show up in Firefox.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg5"
inkscape:version="1.1 (1:1.1+202105261517+ce6663b3b7)"
sodipodi:docname="test.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.92648709"
inkscape:cx="382.08843"
inkscape:cy="460.88068"
inkscape:window-width="1920"
inkscape:window-height="1143"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2">
<marker
style="overflow:visible;"
id="Arrow2Lend"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow2Lend"
inkscape:isstock="true">
<path
transform="scale(1.1) rotate(180) translate(1,0)"
d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
style="fill-rule:evenodd;fill:context-stroke;stroke-width:0.62500000;stroke-linejoin:round;"
id="path899" />
</marker>
<marker
style="overflow:visible"
id="Arrow1Lstart"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart"
inkscape:isstock="true">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;fill:context-stroke;stroke:context-stroke;stroke-width:1.0pt"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path878" />
</marker>
</defs>
<g
inkscape:label="Lager 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
d="M 33.740293,27.950213 102.27875,62.019309 49.732599,111.80037"
id="path876" />
</g>
</svg>
Is the SVG bad (bug in inkscape), or is there a problem with Firefox?
Embedding using img or viewing the file directly has no impact on the result.
On Firefox 91.0.2
As #MichaelMullany has pointed out:
If you delete fill:context-stroke from the style string, or replace it by fill:#000 (or using the hex code for your color of choice), Firefox should be able to display the arrowhead correctly.
is it possible to animate a path with marker elements? the path id in question is #orbit1. the reason i created the markers is that they will be used multiple times.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1" viewBox="0 0 1500 1000">
<defs>
<marker id="arrowRight" viewBox="0 0 7.1 11.5" refX="5" refY="5.75"
markerUnits="userSpaceOnUse" orient="auto-start-reverse"
markerWidth="7.1" markerHeight="11.5">
<polygon points="1,11.5 0,10.4 5.1,5.7 0,1 1,0 7.1,5.7" fill="#00897b"/>
</marker>
<marker id="circle" viewBox="0 0 6 6" refX="1" refY="3"
markerUnits="userSpaceOnUse" orient="auto"
markerWidth="6" markerHeight="6">
<circle cx="3" cy="3" r="3" fill="#4caf50"/>
</marker>
</defs>
<!-- arrowhead symbol -->
<symbol>
<path id="d_arrow1" fill="red" d="M-10-10L10 0l-20 10 2-10-2-10z" />
</symbol>
<!-- animateMotion defines the motion path animation -->
<animateMotion xlink:href="#a1" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#orbit1" />
<!-- mpath = sub-element for the <animateMotion> element provides the ability to reference an external <path> element as the definition of a motion path -->
</animateMotion>
<animateMotion xlink:href="#a2" begin="0s" dur="3s" rotate="auto-reverse" keyPoints="1;0" keyTimes="0;1" calcMode="linear" repeatCount="indefinite">
<mpath xlink:href="#orbit2" />
</animateMotion>
<!-- arrow paths -->
<path id="orbit2" d='M 365 400 A 370 200 0 0 1 1100 400' fill="none" stroke-width="3" style="stroke: green; stroke-dasharray: 50 818; stroke-dashoffset: 50"/>
<!-- marker arrows -->
<!-- orbit1 to be animated using mpath -->
<path id="orbit1" d="M308.7 34.9C381.3 37.4 444.3 78 478.7 137.5" stroke="#4caf50" fill="none" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="50 1000" stroke-dashoffset="50"
marker-start="url(#circle)"
marker-end="url(#arrowRight)"/>
<!-- <animate> svg element used to animate an attribute or property of an element over time. it's normally inserted inside the element or referenced by the href attribute of the target element -->
<animate id="anim1" xlink:href="#orbit1" attributeName="stroke-dashoffset" from="50" to="-960" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" />
<!-- animate using the animateMotion definition above -->
<animate id="anim2" xlink:href="#orbit2" attributeName="stroke-dashoffset" from="-810" to="50" dur="3s" begin="0s" fill="freeze" repeatCount="indefinite" />
<!-- <use id="a1" xlink:href="#d_arrow1" x="0" y="0" width="100" height="50" />-->
<use id="a2" xlink:href="#d_arrow1" x="0" y="0" width="100" height="50" />
</svg>
Currently, I have the following svg:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
<g class="background" stroke-width="3" fill="transparent">
<circle cx="40" cy="40" r="39" stroke="black" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
<circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
</g>
</svg>
http://jsfiddle.net/r5HYK/1/
As you can see, there is the black circle with some "corners" added (dunno how to call that in English). But these "corners" are both outside and inside the circle, but I want to have them only inside. To see how it should look like, you can add the out-commented circle to the svg.
But this solution does not work for me since this svg should be included into a bigger svg file, where the circle to remove the outer "corners" would be visible itself.
So I am searching for something that removes this outer "corners" (maybe a filter?), but does not have any other effect.
Another solution would be a one-sided stroke, since the stroke is expanded to both sides at the moment, but I currently do not know whether this even exists.
Any suggestions?
A clipPath is what you want. You can just clip away everything outside the circle.
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" onclick='dispcoord(evt)' viewBox="0 0 80 80">
<defs>
<clipPath id="clip1">
<circle cx="40" cy="40" r="39" fill="black" />
</clipPath>
</defs>
<g class="background" stroke-width="3" fill="transparent" clip-path="url(#clip1)">
<circle cx="40" cy="40" r="39" stroke="black" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(112.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(202.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(292.5, 40,40)" />
<path d="M 0,40 A 37,37 0 0,1 12,12" stroke-width="11" stroke="black" transform="rotate(22.5, 40,40)" />
<circle cx="40" cy="40" r="44" stroke="transparent" stroke-width="7" />
</g>
</svg>
Greeting to all,
I recently found myself reading the following article (http://apike.ca/prog_svg_smil.html) and more specifically the "Animation Element - animateMotion".
Is there a way of "telling" the moving "marker" to accelerate or decelerate on specific portions (segments) of the path, or is its speed always defined by the "dur" attribute (in seconds)?
Thanks in advance.
Controlling the animation timing is provided by the calcMode, keyTimes, keySplines and keyPoints attributes of svg animation elements such as animateMotion. Basically you specify points on a normalized timeline and tell svg how to map them onto the progress measured on a normalized timeline as well. you also specify how to interpolate between the support points given. for smooth animations you would chose calcMode="spline".
the relevant references are:
svg(animateMotion)
svg(keyPoints)
smil(CalcModes)
smil(keyTimes)
for demo purposes, have a look at an animated line tracking demo (online here, click on the dark bar; example taken from here, timing control added):
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
width="200" height="200"
viewBox="0 0 200 200" >
<!-- Matthew Bystedt http://apike.ca 2012 -->
<!-- Pattern Definition -->
<defs>
<pattern id="rulerPattern" patternUnits="userSpaceOnUse"
x="0" y="0" width="10" height="10"
viewBox="0 0 10 10" >
<line x1="0" y1="0" x2="10" y2="0" stroke="lightblue" fill="none" stroke-dasharray="2,2" />
<line x1="0" y1="0" x2="0" y2="10" stroke="lightblue" fill="none" stroke-dasharray="2,2" />
</pattern>
<marker id="marker2" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="darkgreen" />
</marker>
</defs>
<!-- Background -->
<rect x="0" y="0" width="100%" height="100%" fill="url(#rulerPattern)" stroke="black" />
<!-- Path Line Example -->
<path id="myAniPath" d="M10,150 A15 15 180 0 1 70 140 A15 25 180 0 0 130 130 A15 55 180 0 1 190 120 A15 10 170 0 1 10 150" stroke="lightgreen" stroke-width="2" fill="none" marker-mid="url(#marker2)" />
<rect x="-10" y="-5" width="20" height="10" fill="none" stroke="black" >
<animateMotion begin="startButton.click" dur="10s" calcMode="spline" keyTimes="0; 1" keySplines=".75 0 .25 1" repeatCount="1" rotate="auto" fill="freeze">
<mpath xlink:href="#myAniPath" />
</animateMotion>
</rect>
<rect id="startButton" x="20" y="20" width="60" height="20" fill="green" />
<line stroke="black" stroke-width="2" x1="20" y1="20" x2="20" y2="40" >
<animate begin="startButton.click" attributeName="x1" from="20" to="80" dur="10s" repeatCount="1" fill="freeze" />
<animate begin="startButton.click" attributeName="x2" from="20" to="80" dur="10s" repeatCount="1" fill="freeze" />
</line>
</svg>