Related
I had an exsits path that represent line with arrow:
<path {...lineProps} id={id} />
it looks like:
is there a chance to add the next svg in the middle of the current link:
<svg width="32" height="18" viewBox="0 0 32 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</svg>
it looks like:
eventually it should look like:
As #AKX commented you need to find the point in the middle of the path. You can do it using the getTotalLength and getPointAtLength methods.
As for the tag you can put it inside a symbol and use the symbol with <use>. The use element can take an x and y attributes, the x and y of the point in the middle of the path. In order to center the use element around the point you need also to translate the use element backward half width and height
//the path length
let l = thePath.getTotalLength();
//the point in the middle of the path
let p = thePath.getPointAtLength(l/2);
//set the x andy attributes in the middle of the path
theUse.setAttribute("x", p.x);
theUse.setAttribute("y", p.y);
<svg viewBox="0 0 300 200" width="300">
<symbol viewBox="0 0 32 18" fill="none" id="s">
<rect width="32" height="18" rx="9" fill="#F8788F"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 10.9423L12 9.28917L10.3468 10.9423L10.0577 10.6532L11.7109 9.00003L10.0577 7.34693L10.3468 7.05784L12 8.71094L13.6531 7.05784L13.9421 7.34693L12.289 9.00003L13.9421 10.6532L13.6531 10.9423Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6531 11.4001L12 9.74695L10.3468 11.4001L9.59993 10.6532L11.2531 9.00003L9.59992 7.34693L10.3468 6.60006L12 8.25316L13.6531 6.60006L14.3999 7.34693L12.7468 9.00003L14.3999 10.6532L13.6531 11.4001ZM12.289 9.00003L13.9421 7.34693L13.6531 7.05784L12 8.71094L10.3468 7.05784L10.0577 7.34693L11.7109 9.00003L10.0577 10.6532L10.3468 10.9423L12 9.28917L13.6531 10.9423L13.9421 10.6532L12.289 9.00003Z" fill="#FEFEFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 13.7081C13.3154 13.1808 14.0955 12.8115 14.6823 11.926C15.302 10.9909 15.7984 9.31606 15.8863 5.9205C14.5265 5.74148 13.1976 5.26052 12.0002 4.4796C10.8027 5.26052 9.4738 5.74148 8.11402 5.9205C8.20188 9.31606 8.69829 10.9909 9.31803 11.926C9.90483 12.8115 10.6849 13.1808 12.0001 13.7081ZM11.7768 14.911C11.9199 14.968 12.0804 14.968 12.2235 14.911L12.2434 14.9031C15.0408 13.7903 16.9994 13.0112 17.0964 5.40383C17.1006 5.07248 16.8312 4.80237 16.5007 4.77785C15.0545 4.67052 13.6299 4.17427 12.3834 3.2891C12.1546 3.12662 11.8457 3.12662 11.6169 3.2891C10.3705 4.17427 8.94583 4.67052 7.49961 4.77785C7.16914 4.80237 6.8997 5.07248 6.90392 5.40383C7.00086 13.0112 8.95954 13.7903 11.7569 14.9031L11.7768 14.911Z" fill="#FEFEFF"/>
</symbol>
<marker id="mk" viewBox="0 0 4 4" markerWidth="4" markerHeight="4" refX="0" refY="2" orient="auto-start-reverse">
<polygon points="0,0 4,2 0,4" fill="black" />
</marker>
<path id="thePath" d="M10,10 L270,160" stroke="black" stroke-width="4" stroke-dasharray="5" marker-end="url(#mk)" />
<use id="theUse" xlink:href="#s" width="32" height="18" transform="translate(-16,-9)" />
<svg>
I have created the following code with the intent of drawing a line between hundred points:
<svg width={"100"} height={"100"} className='svg' stroke='#000'>
<line strokeWidth={1}
x1={xDataSet[1]} x2={xDataSet[2]} x3={xDataSet[2]} x4={xDataSet[3]} x5={xDataSet[4]} x6={xDataSet[5]} x7={xDataSet[6]} x8={xDataSet[7]} x9={xDataSet[8]} x10={xDataSet[9]}
x11={xDataSet[10]} x12={xDataSet[11]} x13={xDataSet[12]} x14={xDataSet[13]} x15={xDataSet[14]} x16={xDataSet[15]} x17={xDataSet[16]} x18={xDataSet[17]} x19={xDataSet[18]} x20={xDataSet[19]}
x21={xDataSet[20]} x22={xDataSet[21]} x23={xDataSet[22]} x24={xDataSet[23]} x25={xDataSet[24]} x26={xDataSet[25]} x27={xDataSet[26]} x28={xDataSet[27]} x29={xDataSet[28]} x30={xDataSet[29]}
x31={xDataSet[30]} x32={xDataSet[31]} x33={xDataSet[32]} x34={xDataSet[33]} x35={xDataSet[34]} x36={xDataSet[35]} x37={xDataSet[36]} x38={xDataSet[37]} x39={xDataSet[38]} x40={xDataSet[39]}
x41={xDataSet[40]} x42={xDataSet[41]} x43={xDataSet[42]} x44={xDataSet[43]} x45={xDataSet[44]} x46={xDataSet[45]} x47={xDataSet[46]} x48={xDataSet[47]} x49={xDataSet[48]} x50={xDataSet[49]}
x51={xDataSet[50]} x52={xDataSet[51]} x53={xDataSet[52]} x54={xDataSet[53]} x55={xDataSet[54]} x56={xDataSet[55]} x57={xDataSet[56]} x58={xDataSet[57]} x59={xDataSet[58]} x60={xDataSet[59]}
x61={xDataSet[60]} x62={xDataSet[61]} x63={xDataSet[62]} x64={xDataSet[63]} x65={xDataSet[64]} x66={xDataSet[65]} x67={xDataSet[66]} x68={xDataSet[67]} x69={xDataSet[68]} x70={xDataSet[69]}
x71={xDataSet[70]} x72={xDataSet[71]} x73={xDataSet[72]} x74={xDataSet[73]} x75={xDataSet[74]} x76={xDataSet[75]} x77={xDataSet[76]} x78={xDataSet[77]} x79={xDataSet[78]} x80={xDataSet[79]}
x81={xDataSet[80]} x82={xDataSet[81]} x83={xDataSet[82]} x84={xDataSet[83]} x85={xDataSet[84]} x86={xDataSet[85]} x87={xDataSet[86]} x88={xDataSet[87]} x89={xDataSet[88]} x90={xDataSet[89]}
x91={xDataSet[90]} x92={xDataSet[91]} x93={xDataSet[92]} x94={xDataSet[93]} x95={xDataSet[94]} x96={xDataSet[95]} x97={xDataSet[96]} x98={xDataSet[97]} x99={xDataSet[98]} x100={xDataSet[99]}
y1={yDataSet[1]} y2={yDataSet[2]} y3={xDataSet[2]} y4={xDataSet[3]} y5={xDataSet[4]} y6={xDataSet[5]} y7={xDataSet[6]} y8={xDataSet[7]} y9={xDataSet[8]} y10={xDataSet[9]}
y11={yDataSet[10]} y12={yDataSet[11]} y13={yDataSet[12]} y14={yDataSet[13]} y15={yDataSet[14]} y16={yDataSet[15]} y17={yDataSet[16]} y18={yDataSet[17]} y19={yDataSet[18]} y20={yDataSet[19]}
y21={yDataSet[20]} y22={yDataSet[21]} y23={yDataSet[22]} y24={yDataSet[23]} y25={yDataSet[24]} y26={yDataSet[25]} y27={yDataSet[26]} y28={yDataSet[27]} y29={yDataSet[28]} y30={yDataSet[29]}
y31={yDataSet[30]} y32={yDataSet[31]} y33={yDataSet[32]} y34={yDataSet[33]} y35={yDataSet[34]} y36={yDataSet[35]} y37={yDataSet[36]} y38={yDataSet[37]} y39={yDataSet[38]} y40={yDataSet[39]}
y41={yDataSet[40]} y42={yDataSet[41]} y43={yDataSet[42]} y44={yDataSet[43]} y45={yDataSet[44]} y46={yDataSet[45]} y47={yDataSet[46]} y48={yDataSet[47]} y49={yDataSet[48]} y50={yDataSet[49]}
y51={yDataSet[50]} y52={yDataSet[51]} y53={yDataSet[52]} y54={yDataSet[53]} y55={yDataSet[54]} y56={yDataSet[55]} y57={yDataSet[56]} y58={yDataSet[57]} y59={yDataSet[58]} y60={yDataSet[59]}
y61={yDataSet[60]} y62={yDataSet[61]} y63={yDataSet[62]} y64={yDataSet[63]} y65={yDataSet[64]} y66={yDataSet[65]} y67={yDataSet[66]} y68={yDataSet[67]} y69={yDataSet[68]} y70={yDataSet[69]}
y71={yDataSet[70]} y72={yDataSet[71]} y73={yDataSet[72]} y74={yDataSet[73]} y75={yDataSet[74]} y76={yDataSet[75]} y77={yDataSet[76]} y78={yDataSet[77]} y79={yDataSet[78]} y80={yDataSet[79]}
y81={yDataSet[80]} y82={yDataSet[81]} y83={yDataSet[82]} y84={yDataSet[83]} y85={yDataSet[84]} y86={yDataSet[85]} y87={yDataSet[86]} y88={yDataSet[87]} y89={yDataSet[88]} y90={yDataSet[89]}
y91={yDataSet[90]} y92={yDataSet[91]} y93={yDataSet[92]} y94={yDataSet[93]} y95={yDataSet[94]} y96={yDataSet[95]} y97={yDataSet[96]} y98={yDataSet[97]} y99={yDataSet[98]} y100={yDataSet[99]}
/>
</svg>
There can obviously be several reasons for this not working. To give you a hint on what the problem might be, here is some context:
The program does not crash. Instead it loads everything perfectly, except there is no line
The problem is not that the datasets are empty or something similar. Both datasets contain hundred numbers in the form of strings ('10', for example).
Side note: If there is a more efficient way to do this, I would like some ideas on that as well, lmao.
Thanks in advance.
The line element has four co-ordinate attributes — x1, x2, y1 and y2 — representing the start and end points of the line for the two axis.
All the other x* and y* attributes you provide are ignored.
You seem to be trying to use it to draw a polygon.
If you're aiming at drawing a complex lines (e.g "zig zag line") – <polyline> would be the most appropriate element.
svg {
display:inline-block;
width:10vw;
overflow:visible
}
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polyline points="0,0 50,50 100,0 150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>
<!--closed shape – since polygon will automatically close a shape -->
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 50,50 100,0 150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path d="M0, 0 L50, 50 L100,0 L150, 50" fill="none" stroke="#000" stroke-width="10" />
</svg>
<!--closed shape – caused by Z(closepath) command -->
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path d="M0, 0 L50, 50 L100,0 L150, 50z" fill="none" stroke="#000" stroke-width="10" />
</svg>
As #Quentin pointed out, <line> can only display single straight line segements.
If you actually want to draw a "solid" closed shape (that should e.g have a color fill) – polygon is the way to go.
Depending on your further usage in your app you might also consider using a path element instead.
I'm trying to achieve a svg path fill animation like the gif below, tried clipPath but no luck, any help, idea how to achieve that kind of animation (gif image below)? tried gsap or any svg animation library but none of them cater my needs.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 263.42 187.39">
<defs>
<clipPath id="clip1">
<path class="cls-1" fill="#c2a01e" d="M1889.36,77.11v3.47L1853,111.81q-10.32,2.86-21.35,7.09l-5.2,2c-8.68-2.49-17.65-5-26.73-7.37l90.6-109.08L1891.48,3V0H1737.59V4.49h0V51.65h2.23V48.17l50.94-43.68h44l-82.46,99.29-4,4.76c25.65,2.89,53.48,10.52,78.8,17.75l5.2-2c22.16-8.58,42.53-12.81,59.26-13.69V77.11Z" transform="translate(-1677.9)"/>
</clipPath>
<clipPath id="clip2">
<path class="cls-1" fill="#c2a01e" d="M1932.74,126.17c-13.82-10.71-52.11-11.68-98.2,6.14l-5.19,2c-53.78-15.35-118.75-32.47-150.47-2.43a3.15,3.15,0,0,0-1,2.51v0a2.32,2.32,0,0,0,3.67,1.69c24.48-17.77,57.75-16.76,132.38,4.48l-1.75.75c-8.06,3.49-21,9.57-34.68,15.79-20.34-9.54-48.19-17.44-66.13-6.65-26.21,15.75-19.06,51.2,38.47,30.66,8.47-3,48.84-21.17,83-35,2.93.89,5.92,1.79,9,2.73,16.51,5.06,38.3,8.93,57.55,10.6C1945.4,163.47,1948.48,138.37,1932.74,126.17ZM1712,157.37c15.48-11.94,39.91-5.59,58.83,2.82-6.94,3.12-13.89,6.17-20.3,8.84C1699.64,190.21,1697.33,168.67,1712,157.37Zm149.51-14c-4.11-1.09-8.38-2.27-12.78-3.51,9.34-3.58,17.56-6.5,23.64-8.22,29.63-8.41,58.5-3.24,61,6.19C1936.54,149.74,1912.3,156.79,1861.48,143.37Z" transform="translate(-1677.9)"/>
</clipPath>
</defs>
<path class="cls-1" fill="#FFF" clip-path="url(#clip1)" transform="translate(-1677.9)"/>
<path class="cls-1" fill="#FFF" clip-path="url(#clip2)" transform="translate(-1677.9)"/>
</svg>
The general idea is this: you draw the path you clip it as you need and next you animate the stroke-dashoffset of the clipped path. You make sure that the animation for the next path begins after the previous one ends: begin="a.end + .5s".
However in this case you will need to rewrite the paths. For example in the case of the lace I would use 2 paths and 2 different clip-paths or even 3. Otherwise you get an unaesthetic bleeding effect where the path overlaps.
<svg viewBox="0 0 500 500">
<defs>
<clipPath id="theZ">
<path d="M401.374,215.788v6.586l-69.015,59.278c-13.06,3.619-26.567,8.105-40.525,13.457l-9.869,3.797
c-16.477-4.727-33.502-9.49-50.737-13.989L403.196,77.872l2.202-2.752v-5.694h-292.1v8.522l0,0v89.515h4.232v-6.605l96.69-82.91
h83.517L141.219,266.41l-7.592,9.035c48.687,5.486,101.511,19.969,149.57,33.691l9.871-3.796
c42.062-16.286,80.727-24.315,112.481-25.985v-63.567H401.374z"/>
</clipPath>
<clipPath id="theLace">
<path d="M483.714,308.909c-26.231-20.329-98.91-22.17-186.394,11.654l-9.852,3.796
c-102.081-29.135-225.4-61.631-285.608-4.611c-1.316,1.222-2.013,2.971-1.898,4.764l0,0c0.201,2.424,2.328,4.227,4.751,4.025
c0.799-0.065,1.565-0.348,2.215-0.817c46.466-33.729,109.616-31.812,251.271,8.503l-3.321,1.424
c-15.298,6.625-39.86,18.165-65.826,29.971c-38.607-18.107-91.47-33.103-125.522-12.621c-49.75,29.895-36.178,97.183,73.02,58.195
c16.077-5.694,92.704-40.184,157.544-66.434c5.561,1.689,11.236,3.397,17.082,5.182c31.338,9.604,72.698,16.95,109.236,20.12C507.744,379.709,513.591,332.066,483.714,308.909z M64.726,368.131c29.383-22.664,75.753-10.611,111.666,5.352
c-13.173,5.923-26.365,11.712-38.531,16.779C41.265,430.464,36.88,389.579,64.726,368.131z M348.512,341.557
c-7.801-2.068-15.906-4.309-24.258-6.662c17.729-6.795,33.331-12.338,44.871-15.603c56.241-15.963,111.04-6.149,115.785,11.749
c6.017,22.607-39.993,35.988-136.455,10.516H348.512z"/>
</clipPath>
</defs>
<path fill="none" stroke="#C2A01E" clip-path="url(#theLace)" stroke-width="25" stroke-dasharray="1206" stroke-dashoffset="1206" d="M-0.038,324.512c0,0,49.523-27.071,69.538-27.012 c23.35,0.069,74.84,1.785,121.646,11.637C242.583,319.965,288.5,338.5,288.5,338.5s134.99,34.916,169,27s36.999-16.612,35-33.425
s-44.115-67.954-226,12.425s-172,69-172,69s-52.867,8.077-52-16s7.277-37.219,43.205-46.984c38.84-10.557,110.17,30.986,110.17,30.986" >
<animate id="a"
attributeName="stroke-dashoffset"
attributeType="XML"
from="1206" to="0"
dur="1s"
fill="freeze"
repeatCount="1"/>
</path>
<path fill="none" stroke="#C2A01E" d="M259.424,309.137V64.778" clip-path="url(#theZ)" stroke-width="300" stroke-dasharray="244.36" stroke-dashoffset="244.36">
<animate
attributeName="stroke-dashoffset"
attributeType="XML"
begin="a.end + .5s"
from="244.36" to="0"
dur="1s"
fill="freeze"
repeatCount="1"
/>
</path>
</svg>
I am working with individual SVG paths and when there is a path join , need a mitre effect.Its quite new for me.
SVG shape looks like polygon , with each side as individual path.
Sample of my SVG code , does not display the original Polygon. Please see image for o/p:
<svg viewBox="0 0 330 330">
<g id="v-3" class="joint-viewport">
<g model-id="db69ee92-054d-4ce5-9300-ae09f385d9f2" id="j_1" class="joint-cell joint-type-custom joint-type-custom-line joint-element joint-theme-default" data-type="custom.Line" transform="translate(90,90)">
<g class="rotatable" id="v-12">
<g class="scalable" transform="scale(2.5,3.75)">
<path class="path0" id="v-13" d="M 0 0 L 30 0" stroke="#806476" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path1" id="v-14" d="M 30 0 L 30 20" stroke="#181972" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path2" id="v-15" d="M 30 20 L 60 20" stroke="#91a19b" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path3" id="v-16" d="M 60 20 L 60 40" stroke="#f24167" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path4" id="v-17" d="M 60 40 L 0 40" stroke="#21e578" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
<path class="path5" id="v-18" d="M 0 40 L 0 0" stroke="#cf2fe0" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
</g>
</g>
</g>
</g>
</svg>
The below image link of SVG shows the polygon shape. When I click on individual paths , the intersection should change as first path over the second , second path over the first and then the mitre effect. I achieved the other two , but not the mitre effect.
SVG shape
The second image link shows the transition for each mouse click.I need to know the mitre/diagonal effect as shown in last figure.
Image 3
If its the single svg , then mitre effect can be done with line-join.
How to have the mitre effect here ?
In order to get the miter you need to use shapes instead of strokes. You can do it by hand if you think that the miter is an isosceles right triangle whose catheti = 15.
<svg viewBox="0 0 300 300" width="200">
<path id="_1" d="M50,50L150,50 135,65 65,65z" fill="#806476"/>
<path id="_2" d="M150,50L150,150 135,165 135,65z" fill="#181972"/>
<path id="_3" d="M150,150 L250,150 235,165 135,165z" fill="#91a19b" />
<path id="_4" d="M250,150L250,250 235 235 235 165z" fill="#f24167"/>
<path id="_5" d="M250,250L50,250 65,235 235 235z" fill="#21e578"/>
<path id="_6" d="M50,250L50,50 65,65 65,235z" fill="#cf2fe0" />
</svg>
I'm currently testing different options to animate SVG Files directly in the .svg File. RIght now I'm testing animation with includet javascript. The Problem is, i don't get a proper rotation around the origin working.
My Code is currently looking like that:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
</g>
<g>
<path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
L27.8,23.1L27.8,23.1z"/>
</g>
</g>
<g id="loadingRing">
<circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">
</circle>
<script language="JavaScript" type="text/javascript">
var zpos=0;
function turnAround(){
zpos++;
if(zpos>359)zpos=0;
var dz=document.getElementById("loadingRing");
dz.style.transform = "rotate("+zpos+"deg) translate(1%,1%)";
window.setTimeout("turnAround()", 14);
}
turnAround();
</script>
</g>
</svg>
So what am I missing, or does there a better solution exist? Maybe it is possible to include jquery in the svg File?
Thanks in advance
Maybe you should stick to normal SVG tools and not over complicate things for something as trivial as a rotation.
It wasn't clear to me what you want to spin, so I made them both spin:
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
</g>
<g>
<path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
L27.8,23.1L27.8,23.1z"/>
</g>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="360 32 32"
to="0 32 32"
dur="10s"
repeatCount="indefinite"/>
</g>
<g id="loadingRing">
<circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">
</circle>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 32 32"
to="360 32 32"
dur="5s"
repeatCount="indefinite"/>
</g>
</svg>
Here you go, a version with scripting, impractical, but since you wanted it...
dz.setAttribute("transform", "rotate(" + zpos + " 32 32)");
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
<g>
<path class="bag" fill="#016D49" d="M42.1,45.6c-6.7,0-13.5,0-20.2,0c-0.2,0-0.3-0.1-0.3-0.3c0.4-6.9,0.9-13.8,1.3-20.7c0-0.2,0.2-0.3,0.3-0.3
c5.9,0,11.7,0,17.6,0c0.2,0,0.3,0.1,0.3,0.3c0.4,6.9,0.9,13.8,1.3,20.7C42.4,45.5,42.3,45.6,42.1,45.6z"/>
</g>
<g>
<path fill="#016D49" d="M27.8,23.1c0-0.2,0.1-0.5,0.1-0.8c0.9-5.3,4.1-5,4.2-5c0,0,3-0.3,4,5c0,0.3,0.1,0.6,0.2,0.8H38
c0-0.2-0.1-0.5-0.2-0.8c-0.2-0.7-0.4-1.3-0.6-2.1c-1.2-3.1-3-4.7-5.4-4.6c-3.6,0.2-5.1,3.8-5.6,6.6c0,0.3-0.1,0.6-0.1,0.8
L27.8,23.1L27.8,23.1z"/>
</g>
</g>
<g id="loadingRing">
<circle fill="none" stroke="#016D49" stroke-width="0.75" stroke-miterlimit="10" stroke-dasharray="7.0201,7.0201" cx="32" cy="32" r="26.8">
</circle>
<script language="JavaScript" type="text/javascript">
var zpos=0;
function turnAround(){
zpos++;
//if(zpos>359)zpos=0;
var dz=document.getElementById("loadingRing");
//dz.style.transform = "rotate("+zpos+"deg 32 32)";
dz.setAttribute("transform", "rotate(" + zpos + " 32 32)");
window.setTimeout("turnAround()", 14);
}
turnAround();
</script>
</g>
</svg>
Notes:
I couldn't make it work with changing the style property. Not sure why.
You don't need to reset from 359 to 0. Degrees are anyway computed mod 360.