I'm working with an inline SVG.
Example:
<svg viewBox="0 0 8 8">
<path d="m0 0 h8 v4 l-4 4 l-4-4 z"/>
</svg>
I would like to change the l-4 4 command to l-4 0 inside the d attribute using JavaScript. I don't want to edit the entire path, just the l command. Maybe somehow getting the l command with coordinates -4 4 and setting them to -4 0.
How can I achieve this?
Javascript doesn't have a very rich api for interacting with svg. There are probably libraries that fill in this gap, but I haven't looked. If this is all you want to do, you could try something like this:
const svg = document.querySelector("svg");
svg.innerHTML = svg.innerHTML.replace("l-4 4", "l-4 0");
<svg viewBox="0 0 8 8">
<path d="m0 0 h8 v4 l-4 4 l-4-4 z"/>
</svg>
Related
When I create a SVG Path in Illustrator and change the position of the points for a morphing animation the points are totally different!
For example:
<path d="M 355.077,300c-31.017,0-31.017-200-62.034-200 s-31.017,200-62.034,200c-31.015,0-31.015-200-62.031-200c-31.014,0-31.014,200-62.029,200c-31.013,0-31.013-200-62.026-200"/>
and
<path d="M355.077,217.635 c-31.017,0-31.017-64.507-62.034-64.507s-31.017,185.701-62.034,185.701c-31.015,0-31.015-274.316-62.031-274.316 c-31.014,0-31.014,175.276-62.029,175.276c-31.013,0-31.013-97.737-62.026-97.737"/>
are the same path (with moved points obviously). However, the order in which they occur is totally different and therefore the animation pushes the points all around the SVG element.
I have tried all export scripts Illustrator offers.
Is there a trick for getting a consistent result when exporting? So that the points are at the right place? Perhaps a plug-in I can use?
Thanks!
This is not an answer. This is just to say that the paths can be used for morphing since the commands and the number of the commands is the same. However if the paths you have are different a solution would be to change all the commands to C
<svg viewBox="0 0 400 400" width="300">
<path fill="gold" d="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200">
<animate
attributeName="d"
attributeType="XML"
values="M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200;
M355.077,217.635
c-31.017,0-31.017-64.507-62.034-64.507
s-31.017,185.701-62.034,185.701
c-31.015,0-31.015-274.316-62.031-274.316
c-31.014,0-31.014,175.276-62.029,175.276
c-31.013,0-31.013-97.737-62.026-97.737;
M 355.077,300
c-31.017,0-31.017-200-62.034-200
s-31.017,200-62.034,200
c-31.015,0-31.015-200-62.031-200
c-31.014,0-31.014,200-62.029,200
c-31.013,0-31.013-200-62.026-200"
dur="5s"
repeatCount="indefinite"/>
</path>
</svg>
I am working on a svg graphic that will represent health bar in a game, thus far it is looking like this https://jsfiddle.net/8ds9hpuv
Concept is to have responsive bar that decreases / increases in width based on character health.
Right now I can't figure out how to decrease this path in width, but maintain that rounded edge on the right side all the time.
Ideally I would like to make it's height responsive as well
<svg width="428" height="35">
<path d="M0 0h414.333785C423.444595 9.346449 428 15.179782 428 17.5c0 2.320218-4.555405 8.153551-13.666215 17.5H0V0z" fill="red"/>
</svg>
I've modified the path by changing every command to lowercase (using this tool: Convert SVG path to all-relative or all-absolute ) but I've left the last H command to uppercase since H0 is going back to x="0"
Next I'm replacing the first h command with the variable healthIndicator
I'm assuming that the tip of the arrow has only an aesthetical function.
For the sake of the demp I'm using an input type range to change the value of the healthIndicator. I hope this is what you need.
itr.addEventListener("input",()=>{
let healthIndicator = itr.value;
let d = `M0,0 h${healthIndicator}c9.111,9.346,13.666,15.18,13.666,17.5c0,2.320218,-4.555405,8.153551,-13.666215,17.5H0v-35z`;
thePath.setAttributeNS(null,"d", d);
})
svg{border:1px solid}
<svg viewBox="0 0 550 35" >
<path id="thePath" d="M0,0
h414
c9.111,9.346,13.666,15.18,13.666,17.5
c0,2.320218,-4.555405,8.153551,-13.666215,17.5
H0z" fill="red"/>
</svg>
<input type="range" id="itr" value="414" min="0" max="500" />
This question already has answers here:
How to animate handwriting text on the web page using SVG?
(2 answers)
Closed 6 years ago.
There is my svg:
<svg class="num-frame" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="326.229px" height="242.623px" viewBox="0 0 326.229 242.623" enable-background="new 0 0 326.229 242.623" xml:space="preserve">
<g id="Layer_1">
<g id="Layer_1_1_">
<path class="pathe" stroke-width="4" d="M268.971,60.112c-82.83-148.908-248.519,111.12-145.339,150.875c80.484,30.996,200.946-39.396,168.728-132.591
C261.292-11.486,94.387,6.078,87.437,102.417c-7.715,106.967,139.807,153.589,213.991,93.134c0.709-0.575-0.242-1.804-0.982-1.27
c-59.93,43.702-153.784,28.327-194.988-34.033c-36.732-55.58,0.429-114.795,58.131-131.517
C223.1,11.48,289.667,41.227,294.159,107.434c4.34,63.967-59.375,93.766-112.195,103.209
c-33.778,6.039-74.836,1.325-84.991-36.949c-7.695-28.985,5.878-62.127,19.867-86.895c34.6-61.241,105.552-97.912,150.95-26
C268.258,61.552,269.403,60.889,268.971,60.112L268.971,60.112z" />
</g>
</g>
</svg>
I need to make an animation, that will look like hand drawing this circle (line animation), I know have to make it with help of stroke but than the path will lost it's orginal shape, so I want animate orginal shape (path) in way like with stroke.
You could make put a simpler path on top of that one with a white stroke, and use the 2nd path's stroke-dasharray to do the animation that reveals the path underneath.
By simpler, I mean that the 2nd path would have a single stroke and no fill. Just make sure the stroke-width is wide enough to cover the widest part of the path underneath.
How can I create an arc shape like this:
With CSS or jquery or javascript
You don't even need CSS/JS to draw this. Just use an <svg> element.
<svg width="270" height="120">
<path
d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
stroke-width="3"
stroke="#A5423A"
fill="none"
/>
</svg>
You could use SVG for this. There is an arc path command which you could use.
As your comment states, you want to place content inside the arc and you want them to rotate.
Content like text or image could be placed inside the svg.
Rotation can be achieved with transform=rotate(..).
If you want to do more animations with SVG you could have a look at D3.js. If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.
#AlliterativeAlice is correct.
But for this shape I would use two arcs instead of a lot of C paths.
I also prefer to use relative paths instead of absolute one.
So my solution used arcs and lines instead of only Bezier Curves.
<svg width="300px" height="300px" viewBox="0 0 100 100">
<path d="m 10,60
a 50 50 0 0 1 80,0
l -10,10
a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>
There's a way to attach a event like mouse over into a mask?
This example shows my problem: http://goo.gl/DRhsH
When you pass the mouse NEXT to the blue box, it changes the color from the mask, what i would like to do is to just call that event WHEN the mouse pass over blue box (Not near - This happen beucause the blue and red boxes are masked with another rect, and when you pass the mouse near them)
, because i need to work with only the displayed image, and binding a event like that should solve my problem.
i tried to bind the click/mouseover into a group but it keeps the same result, the whole image is acessible, and not just the part viewed.
I also tried to clip it, but it keep tracking the content clipped
Edit: Replaced the previous answer as did things improperly and bonsaijs apparently won't allow clipping.
I'd suggest using the mask path as a clip path as well, but bonsiajs doesn't seem to support that. Anyway, here's an SVG structure that triggers events as you intended. If this can't be generated using bonsaijs, maybe you can do it in another way.
<svg width="596" height="596" viewBox="-0.5 -0.5 596 596"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask">
<path d="M 0 0 l 50 0 l 0 150 l -50 0 Z" fill="rgba(255,255,0,1)"
transform="matrix(1,0,0,1,80,0)" id="maskPath"/>
</mask>
<clipPath id="clipPath">
<use xlink:href="#maskPath"/>
</clipPath>
</defs>
<g>
<g mask="url(#mask)" clip-path="url(#clipPath)" onmouseover="alert('in')">
<path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(255,0,0,1)"/>
<path d="M 0 0 l 100 0 l 0 100 l -100 0 Z" fill="rgba(0,0,255,1)"
transform="matrix(1,0,0,1,50,50)"/>
</g>
</g>
</svg>