For a game I'm working on,
I would like to be able to draw a SVG rectangle; using a percentage value (50% would draw half the rectangle stroke).
I need to do this in Javascript since I'll update the value quite often.
<svg id="rectangle-timer" style="width:100%;height:100%;">
<rect width="100%" height="100%"/>
</svg>
I saw quite nice JS libraries like drawSVG or Vivus, but it seems that they work with paths, not with basic shapes like rectangles.
Can anyone help ?
Thanks.
The reason most libraries will use path elements is because of their inheritance from the SVGGeometryElement prototype, which gives you handy functions for computing the path length. So if we swap out this rectangle for a path like this:
<path d="M 0 0 L 1 0 L 1 1 L 0 1 z" />
We get exactly the same output, but its much more controllable. After that, we can just adjust the strokeDasharray value in the style to extend and remove some stroke. For this property we just need two values: initial dash size and initial empty space. So when our progress is 0, we want the first value to be 0 and the second to be the path length , and as we approach 1 we want the second value to 0 and the first one to increase to the path length.
function update( amount ){
const total = rect.getTotalLength();
const filled = total * amount;
const none = total - filled;
rect.style.strokeDasharray = `${filled} ${none}`;
}
const rect = document.getElementById( 'rectangle' );
const input = document.getElementById( 'input' );
input.addEventListener( 'mousemove', event => update( input.value ));
update( input.value );
<svg width="200px" height="200px" viewBox="0 0 200 200">
<path d="M 20 20 L 180 20 L 180 180 L 20 180 z" id="rectangle" fill="none" stroke="black" stroke-width="10" />
</svg>
<input id="input" type="range" min="0" max="1" step=".01" />
If you insist on using a rect, you could get a rectangle's path length by taking its width and height twice, which would look something like this:
function update( amount ){
const total = rect.width.baseVal.value * 2 + rect.height.baseVal.value * 2;
const filled = total * amount;
const none = total - filled;
rect.style.strokeDasharray = `${filled} ${none}`;
}
const rect = document.getElementById( 'rectangle' );
const input = document.getElementById( 'input' );
input.addEventListener( 'mousemove', event => update( input.value ));
update( input.value );
<svg width="200px" height="200px" viewBox="0 0 200 200">
<rect x="20" y="20" width="160" height="160" id="rectangle" fill="none" stroke="black" stroke-width="10" />
</svg>
<input id="input" type="range" min="0" max="1" step=".01" />
In the long run, however, this would mean less versatility, so I would suggest switching to path.
This is my solution: The SVG has preserveAspectRatio ="none" style="width:100%;height:100vh;" The total length of the path is 2*window.innerWidth + 2*window.innerHeight; Both stroke-dasharray and stroke-dashoffset are igual to the total length of the path.
I'm using an input type="range" to animate the stroke-dashoffset.
In order to preserve the stroke width and avoid stretching I'm using vector-effect="non-scaling-stroke"
I hope this is what you need.
function timer(){
let totalLength = 2*window.innerWidth + 2*window.innerHeight;
thePath.setAttributeNS(null, "style", `stroke-dashoffset:${totalLength * (1-range.value)}`)
}
timer()
range.addEventListener("input",timer);
setTimeout(function() {
timer()
addEventListener('resize', timer, false);
}, 15);
*{margin:0; padding:0;}
#thePath {
stroke-dasharray: calc(2 * 100vw + 2* 100vh);
stroke-dashoffset: calc(2 * 100vw + 2* 100vh);
}
#rectangle-timer{background:#dfdfdf}
[type="range"] {
position: absolute;
display: block;
width: 200px;
height: 20px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<svg id="rectangle-timer" viewBox="0 0 100 100" preserveAspectRatio ="none" style="width:100%;height:100vh;">
<path id="thePath" d="M0,0L100,0 100,100 0,100 0,0" fill="none" stroke="skyBlue" stroke-width="25" vector-effect="non-scaling-stroke" />
</svg>
<input type="range" id="range" value=".5" min="0" max="1" step=".01" />
Related
trying to draw a growing arrow that will be linked on page scroll. I was able to attach the path to the scroll, but the marker doesn't move with the path.
Please, help how to make the marker move along with the end of the path? Perhaps the end of the arrow through the marker is not the best solution and you know how to do it correctly?
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Scroll down this window to draw a triangle.</h2>
<p>Scroll back up to reverse the drawing.</p>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="Triangle" viewBox="0 0 10 10" refX="0" refY="10"
markerUnits="strokeWidth" markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke"/>
</marker>
</defs>
<path fill="none" marker-end="url(#Triangle)" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
body {
height: 2000px;
background: #f1f1f1;
}
#mySVG {
position: fixed;
top: 15%;
width: 400px;
height: 210px;
margin-left:-50px;
}
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// The start position of the drawing
triangle.style.strokeDasharray = length;
// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;
// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse the drawing (when scrolling upwards)
triangle.style.strokeDashoffset = length - draw;
}
snippet https://codepen.io/rostislav_blatman/pen/zYLPjQa
find this answer with css animation https://stackoverflow.com/a/75166942/21043600
but this is not the same. In my case need bind on scroll page
Please view the demo here: https://codepen.io/bsoutendijk/pen/gOvLMaq
Expected behavior: After clicking "update path" button, the path will change, and the text will appear along the path by the end of the animation.
Actual behavior: The text appears correctly on the path upon load, but when clicking update path, the text does not appear in the correct place.
code:
const path = document.getElementById('myPath');
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('clicked!');
path.setAttribute('d', getRandomCurve());
})
function getRandomCurve() {
const curveSize = Math.round(Math.random() * 300);
return `M 100 350 q ${curveSize} -300 300 0`
}
#myPath {
transition: all ease-out 2s;
}
<div>
<button id="myButton">Update Path</button>
<svg height="400" width="450">
<path id="myPath" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<text style="font-size: 2em;">
<textPath startOffset="30%" text-anchor="middle" href="#myPath">
Hello World
</textPath>
</text>
</svg>
</div>
How do I use textPath in a way that it can work with animated paths?
const path = document.getElementById("myPath2");
function getRandomCurve() {
const curveSize = Math.round(Math.random() * 300);
return `M 100 350 q ${curveSize} -300 300 0`;
}
setInterval(() => {
const pathDef = getRandomCurve();
path.setAttribute("d", pathDef);
}, 1000)
.anim {
transition: 1s;
}
<div>
<svg height="400" width="450">
<path id="myPath2" class="anim" d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
<text x="0" y="0" style="font-size: 2em;">
<textPath startOffset="30%" href="#myPath2" class="anim">
Hello World
<animateTransform attributeName="transform" dur="2s" repeatCount="indefinite"/>
</textPath>
</text>
</svg>
</div>
Oh, i can do it :)
"animateTransform" can fix your problem.
"repeatCount" - important attribute, try to remove it and your animation will stop after "dur"
I need to present percentage date using a circular path.
Probably stroke-dashoffset is needed to change but how to calculate the percentage and set the stroke-dashoffset to that value?
For example if percent is 25 - one quarter of circle should be blue.
Something like this:
$('button').on('click', function(){
let percent = 25 + '%';
$('.xpath').css('stroke-dashoffset', percent);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "width:90px; height:90px;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#ddd" stroke-width="3" fill-opacity="0"></path><path class='xpath' d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 300, 300; stroke-dashoffset: 20;"></path></svg>
</div>
<br>
<button>CLICK</button>
For that you need to calculate the value of stroke-dasharray so that the perimeter of circle is calculated. Then you need to determine the part that is shown blue based on that percent value:
$('button').on('click', function() {
let percent = 25;
let dashArray = +$('.xpath').css('stroke-dasharray').split(',')[0].replace('px','');
$('.xpath').css('stroke-dashoffset', (dashArray-(dashArray*percent/100)) + 'px');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:90px; height:90px;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;"><path d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#ddd" stroke-width="3" fill-opacity="0"></path><path class='xpath' d="M 50,50 m 0,-47.5 a 47.5,47.5 0 1 1 0,95 a 47.5,47.5 0 1 1 0,-95" stroke="#4598C9" stroke-width="5" fill-opacity="0" style="stroke-dasharray: 300, 300; stroke-dashoffset: 20;"></path></svg>
</div>
<br>
<button>CLICK</button>
I'm trying to display a bunch of weather stations on a Leaflet map with SVG icons. Right now I'm just trying to get a handle on the drawing part.
The icons are tear shaped and should rotate around the "circle" part of the icon depending on the direction of the wind.
I'm having a hard time figuring out how to setup the transform and transform-origin so that it the icon "stays in place" and rotates around the "circle" in the path.
In the example below the number should stay in the middle of the circle.
var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction
var d = 0;
var path = svg.select('path');
// The animated rotation is just to make the example easy to verify.
function rotate(){
d = (d + 15 < 360) ? d + 15 : 0;
path.style('transform', 'rotate('+d+'deg)');
window.setTimeout(rotate, 60);
};
rotate();
svg {
overflow: visible;
background-color: #ffedfd
}
.station-icon path {
/** what am I supposed to use here? **/
transform-origin: center 40%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
<svg width="26" height="26">
<g transform="translate(0,-6)">
<path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
S26,26.2,26,19z"/>
</g>
<g>
<text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
</g>
</svg>
</div>
An alternative without using transform-origin is setting the center of the rotation (here, using magic numbers):
path.attr('transform', 'rotate('+d+' 13 19)');
var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction
var d = 0;
var path = svg.select('path');
// The animated rotation is just to make the example easy to verify.
function rotate(){
d = (d + 15 < 360) ? d + 15 : 0;
path.attr('transform', 'rotate('+d+' 13 19)');
window.setTimeout(rotate, 60);
};
rotate();
svg {
overflow: visible;
background-color: #ffedfd
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
<svg width="26" height="26">
<g transform="translate(0,-6)">
<path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
S26,26.2,26,19z"/>
</g>
<g>
<text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
</g>
</svg>
</div>
Does setting the origin to 60% achieve what you want?
var svg = d3.select('#icon svg');
// this is really done dynamically based on wind direction
var d = 0;
var path = svg.select('path');
function rotate(){
d = (d + 15 < 360) ? d + 15 : 0;
path.style('transform', 'rotate('+d+'deg)');
window.setTimeout(rotate, 60);
};
rotate();
svg {
overflow: visible;
background-color: #ffedfd
}
.station-icon path {
/** what am I supposed to use here? **/
transform-origin: center 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="icon" class="leaflet-marker-icon station-icon">
<svg width="26" height="26">
<g transform="translate(0,-6)">
<path class="st0" d="M26,19c0-2.2-0.6-4.4-1.6-6.2C22.2,8.8,13,0,13,0S3.8,8.7,1.6,12.8c-1,1.8-1.6,4-1.6,6.2c0,7.2,5.8,13,13,13
S26,26.2,26,19z"/>
</g>
<g>
<text x="13" y="13" font-family="sans-serif" font-size="20px" fill="white" text-anchor="middle" alignment-baseline="central">6</text>
</g>
</svg>
</div>
Okay so i am relatively new to both svgand snap.svg.
However i am trying out the different features and how to create all sorts of different text elements.
Normal text is not a challenge however i started wondering how do i make text that actually bends?
Say for instance i want to create a text such as this:
As you can see the text bends.
My Ultimate goal is to use snap.svgto allow the user to bend the text however I'm not quite sure on how to do this.
Has anyone attempted to bend text and is able to point me in the right direction?
SVG is necessary to define a path with curved dimensions.
Here an example:
<svg height="70" width="300">
<defs>
<path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
</defs>
<rect x="0" y="0" height="70" width="300" fill="#292425" />
<text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
<textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
</text>
</svg>
Update:
And this is a simple example where a user can bend the text, in real time.
Using VanillaJS (Javascript) and Snap.svg.
(function() {
var orientation = document.getElementById("orientation");
orientation.addEventListener("change", function() {
bendText(this.value);
});
function bendText(value) {
var snap = Snap("#myTextPath");
snap.attr("d", "M 30 55 q 100 " + value * -1 + " 240 0");
}
})();
input[type=range][orient=vertical] {
writing-mode: bt-lr;
/* IE */
-webkit-appearance: slider-vertical;
/* WebKit */
width: 8px;
height: 175px;
padding: 0 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<input id="orientation" type="range" orient="vertical" value="46" max="46" min="-46" />
<svg height="70" width="300">
<defs>
<path id="myTextPath" d="M 30 55 q 100 -46 240 0" />
</defs>
<rect x="0" y="0" height="70" width="300" fill="#292425" />
<text x="10" y="100" style="font-size: 18px; stroke: #E6E6E6;">
<textPath xlink:href="#myTextPath">INVITATION TIL BRYLLUP</textPath>
</text>
</svg>
Demo
You can just use a textpath attribute, which takes a path and positions the string along it.
var s = Snap(500,500);
var path = "M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100";
var text = s.text(50,50,'Hi there, Im a textpath that curves along a path string')
.attr({ 'textpath': path })
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
docs