I am using this video tutorial about inline SVGs as a reference. I am trying to replicate the effect of making an SVG line appear to draw itself in from its middle point out. The only difference between the approach from the video and mine is that in the video, the SVG line has a predefined length, where as mine is of variable length.
The idea behind the approach is pretty simple. You make an SVG line of whatever size you want, then set its stroke-dasharray property to be '0, length/2' and its stroke-dashoffset property '-length/2', so that the line is not drawn at all at first and its 'starting point' is set to be at its middle point. Then when the relevant input field is focused, you change the dasharray property to be 'length, 0' and the dashoffset property to 0. This makes the dashes be equal to the length of the line. This should make the line appear to draw itself in from the middle point, and indeed this does happen if you know the length of the line from the start. However, this is not what happens when I try to implement this approach using lines that don't have predetermined lengths. My line appears to draw itself in from almost the very beginning of the line, instead of from the middle point. I am confused as to why this is happening. I am using JavaScript to calculate the length of the line. Below is a snippet of my code.
function animateLine() {
const input = document.querySelector('.input');
const line = document.querySelector('.focus');
const length = line.getTotalLength();
line.style.strokeDasharray = `0, ${length/2}`;
line.style.strokeDashoffset = `-${length/2}`;
input.addEventListener('focus', function() {
line.style.strokeDasharray = `${length}, 0`;
line.style.strokeDashoffset = `0`;
});
};
animateLine();
/* Input module */
.input {
background: none;
border: none;
width: 100 %;
padding: 0.5em;
padding-left: 0;
color: white;
font-family: inherit;
font-size: 0.85em;
}
.input:focus {
outline: none;
}
.line {
width: 100%;
height: 2px;
padding: 0;
stroke: grey;
}
.focus {
stroke: black;
transition: all 5s;
stroke-dasharray: 0, 10000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="input" type="text" name="review[body]" placeholder="Leave a review..." required>
<svg xmlns="http://www.w3.org/2000/svg" class="line" viewBox="0 0 40 2" preserveAspectRatio="none">
<path d="M0 1 L40 1"></path>
<path d="M0 1 L40 1" class="focus"></path>
</svg>
</body>
</html>
I tried playing around with different percentages, and just using a value of '20' as my half-length because my viewport is of length '40', but none of this worked. Does anyone know what could be the problem here?
I figured out the problem. It's an embarrassing mistake but I'll leave it up here regardless in case anyone ever comes across this problem too.
I was using "transition: all 5s" to better see where the middle point was, when I animated my SVG line in. The problem was that at the start, I was setting stroke-dasharray to "0, 10000" to make the line invisible, and I was not setting the stroke-dashoffset property because I thought I needed to first figure out what the middle point was. I was then setting these 2 properties to what they should be using JavaScript. This triggered a transition to initiate, which took 5 seconds. So when I focused on the relevant input element, I was NOT starting the animation from the middle point like I wanted to; I wasn't waiting 5 seconds when I loaded to the page, which didn't give the initial animation enough time to finish getting to the middle point of the line.
All of this was due to a misunderstanding of mine. My understanding was that the length of the SVG line was proportional to the size of the div containing it (since I was setting the width of the 'line' class to be 100%). However, SVG sizes are actually calculated using viewport units, not pixels or other absolute units. Knowing this, I realized that I could achieve the effect that I was looking using a much simpler approach with no JavaScript involved. We can simply ignore what the actual displayed size of the SVG is going to be, and only focus on the viewport units we initially set. The browser will actually make this viewport units be proportional to whatever space is available to the SVG by default. So instead of calculating what the length of the SVG path is, we can simply use a width of 20 viewport units as the middle point of our SVG line, since we know that these viewport units will be proportional to the space that's available to the SVG. I'd like to emphasize that this will work for any line lengths, as long as you are using a viewport of 40.
/* Input module */
.input {
background: none;
border: none;
width: 100%;
padding: 0.5em;
padding-left: 0;
color: black;
font-family: inherit;
font-size: 0.85em;
}
.input:focus {
outline: none;
}
/* SVGs */
.line {
width: 100%;
height: 2px;
padding: 0;
stroke: grey;
}
.focus {
stroke: black;
transition: all 2s;
stroke-dasharray: 0, 20;
stroke-dashoffset: -20;
}
.input:focus~.line .focus {
stroke-dasharray: 40;
stroke-dashoffset: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input class="input" type="text" name="review[body]" placeholder="Leave a review..." required>
<svg xmlns="http://www.w3.org/2000/svg" class="line" viewBox="0 0 40 2" preserveAspectRatio="none">
<path d="M0 1 L40 1"></path>
<path d="M0 1 L40 1" class="focus">
</path>
</svg>
</body>
</html>
And that is pretty much it. Really basic mistake of mine.
Related
I've animated element.style.left in Windows Chrome
When I use requestAnimationFrame to animate the element.style.left of an absolute-positioned <div>, the animation does not appear smooth in Google Chrome Version 77.0.3865.90 (Official Build) (64-bit) on Windows 10.
The leading edge of the animated element flickers and looks awful
The leading edge of the div seems to disappear / flicker while it's moving. When it moves in the other direction, the other edge disappears / flickers.
In Firefox and Microsoft Edge and on my mobile Chrome, the animation is smooth with no flickering.
Full code example to demonstrate the problem
I've written a simple demo that bounces a div from side to side and shows the problem.
const element = document.getElementById('example')
var left = 20
var increment = 2
function animationStep(timestamp) {
if (left < 20 || left > 200) {
increment = -increment
}
left += increment
element.style.left = (left + 'px')
window.requestAnimationFrame(animationStep)
}
window.requestAnimationFrame(animationStep)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Example</title>
<style>
body {
margin: 0;
background-color: #f0f0f0;
}
#example {
background-color: #fff;
font-family: Arial;
font-size: 15px;
top: 50px;
padding: 6px;
border: 1px solid black;
position: absolute;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="example">Example</div>
<script>
// ...as below
</script>
</body>
</html>
Am I doing something wrong?
Does anyone know what is going on with Chrome on Windows 10? Is there something wrong with my code? If not, are there any good workrounds to stop the flickering? The only one I can think of is to place my div inside a bigger div with an invisible background. For various reasons, I don't want to use CSS animations.
I have created an iframe (lets call it a div to simplify things), that has a transform: scale property that I'm calling with javascript.This scales the div, but however, it also shifts the div upwards. I would like the top to stay in the same place.
Background info (from answers suggestions): I want to create something that looks like google docs. I have created an iframe that will transform when an input box value is change (like google docs). I want the top to remain in the same place (like google docs).
1) I have tried in javascript to implement document.getElementById("textareathingy").style.transform = "translateY(1000px)"; document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")"; I tried to put the translate both before and after the scale, but both methods do not work, and the div continues to go upwards when I put translate first, and the div does not zoom in when I put scale first.
2) I have tried to put position: absolute; to counteract it going up, but that doesn't help either, and it gets rid of my scrolling feature on the div. So in answers please don't use position: absolute.
3) I have tried using the zoom feature, but that doesn't zoom in on the contents of the div, so that also doesn't work.
For some reason, there is no error messages in any of my attempts.
Here is also my css for the div:
#textareathingy{
width: 820px;
margin: 20px auto;
height: 1000px;
border: none;
display: block;
padding: 75px;
background-color: white;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
Here are two pictures from google docs that represents what I want.
Notice how they both have the same "top" position, but it is zoomed in.
Use the transform-origin CSS property to set the point in the element that the transform should originate from. Set this to top so that the scale extends downward from the top point.
img { border:1px solid black;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: top;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
To trigger this from JavaScript, just access the transformOrigin property as you would any other:
let img = document.querySelector("img");
img.style.transformOrigin = "top"; // Set the origin
img.addEventListener("mouseover", function(){
this.classList.add("scale");
});
img.addEventListener("mouseover", function(){
this.classList.remove("scale");
});
.scale {
transform:scale(1.5,1.5);
}
img { border:1px solid black; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: center;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
I am trying to draw an image using JavaScript and svg.js library. The image always comes out with an offset of about 8 pixels from the top and 8 pixels from the left edge of the browser window. I would like the image to start at point (0,0) of the browser window. In other words, it should be aligned at the extreme top left of the browser window and not at some offset. I have tried many different settings but nothing I do seems to help eliminate this offset. I am listing below the latest version of the code I am using. Can somebody please help? Also, is it possible to achieve this effect without using css?
<!DOCTYPE html>
<head>
<meta charset=utf-8>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<style>
body {
width: 100%;
padding: 0px;
}
</style>
</head>
<body>
<div id="drawCurve"></div>
<script id="drawCurve-script">
var s = SVG('drawCurve').size(500,500).viewbox(0,0,500,500);
var p=s.path().attr({
id: 'path0',
padding: '0px',
fill: 'white',
d: 'M0 0 C200 120 300 120 300 100'
});
p.stroke({
color: 'black',
width: 1,
padding: '0px'
});
</script>
</body>
Add margin:0 to your body tag:
body {
width: 100%;
padding: 0px;
margin: 0;
}
I have an svg animated with snap - mina.elastic. Due to the nature of this animation the paths I'm animating go beyond the size of the svg and crops the shapes. I want to see the strech of the whole path animation.
here is the HTML
<svg width="130px" height="113px" viewBox="0 0 130 113" id="svg">
</svg>
the CSS
body{
text-align: center;
padding: 2em;
background-color: #07AD91;
}
JS
s = Snap("#svg");
var firstShape = s.path("M119.297,113L119.297,113v-11.488H130l0,0V113H119.297z").attr({
fill: "#07AD91"
});
var secondShape = s.path("M0,11.488L0,11.488V0h10.703l0,0v11.488H0z").attr({
fill: "#07AD91"
});
firstShape.animate({ d: "M10.011,112.182L0,94.098l54.068-92.65l40.161,71.15H73.607L53.62,37.577L10.011,112.182z;" fill:"#46CEB4" }, 9000, mina.elastic);
secondShape.animate({ d: "M130,91.641H49.094l11.094-16.658h38.5L56.472,0h20.471l42.236,72.818L130,91.641z" fill:"#97E8DA" }, 9000, mina.elastic);
Here is the CODEPEN
I've tried enlarging the svg height and width but then the paths stay top left and crop there.
I just added this to the css to fix my issue
#svg{
overflow: visible;
}
I've just been working to solve this issue. I found this css selector overrides the overflow:hidden for SVG elements in Chrome and Firefox.
svg:not(:root) {
overflow: visible !important;
}
I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other and to the rectangle (on top and centered). What is the best way to do this?
I tried adding an svg text using the "x", "y", "width" and "height" attributes, and then prepending an svg rect. The problem is that the reference point for the text is in the middle (since I want it centered aligned I used text-anchor: middle), but for the rectangle it's the top left coordinate, plus I wanted a bit of margin around the text which makes it kind of a pain.
The other option was using an html div, which would be nice, because I can add the text and padding directly but I don't know how to get the absolute coordinates for each rectangle. Is there a way to do this?
Can you use simply the SVG <title> element and the default browser rendering it conveys? (Note: this is not the same as the title attribute you can use on div/img/spans in html, it needs to be a child element named title)
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
<p>Mouseover the rect to see the tooltip on supporting browsers.</p>
<svg xmlns="http://www.w3.org/2000/svg">
<rect>
<title>Hello, World!</title>
</rect>
</svg>
Alternatively, if you really want to show HTML in your SVG, you can embed HTML directly:
rect {
width: 100%;
height: 100%;
fill: #69c;
stroke: #069;
stroke-width: 5px;
opacity: 0.5
}
foreignObject {
width: 100%;
}
svg div {
text-align: center;
line-height: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg">
<rect/>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
Hello, <b>World</b>!
</div>
</body>
</foreignObject>
</svg>
…but then you'd need JS to turn the display on and off. As shown above, one way to make the label appear at the right spot is to wrap the rect and HTML in the same <g> that positions them both together.
To use JS to find where an SVG element is on screen, you can use getBoundingClientRect(), e.g. http://phrogz.net/svg/html_location_in_svg_in_html.xhtml
The only good way I found was to use Javascript to move a tooltip <div> around. Obviously this only works if you have SVG inside an HTML document - not standalone. And it requires Javascript.
function showTooltip(evt, text) {
let tooltip = document.getElementById("tooltip");
tooltip.innerHTML = text;
tooltip.style.display = "block";
tooltip.style.left = evt.pageX + 10 + 'px';
tooltip.style.top = evt.pageY + 10 + 'px';
}
function hideTooltip() {
var tooltip = document.getElementById("tooltip");
tooltip.style.display = "none";
}
#tooltip {
background: cornsilk;
border: 1px solid black;
border-radius: 5px;
padding: 5px;
}
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<svg>
<rect width="100" height="50" style="fill: blue;" onmousemove="showTooltip(evt, 'This is blue');" onmouseout="hideTooltip();" >
</rect>
</svg>
You can use the title element as Phrogz indicated. There are also some good tooltips like jQuery's Tipsy http://onehackoranother.com/projects/jquery/tipsy/ (which can be used to replace all title elements), Bob Monteverde's nvd3 or even the Twitter's tooltip from their Bootstrap http://twitter.github.com/bootstrap/
On svg, the right way to write the title
<svg>
<title id="unique-id">Checkout</title>
</svg>
check here for more details https://css-tricks.com/svg-title-vs-html-title-attribute/
I came up with something using HTML + CSS only. Hope it works for you
.mzhrttltp {
position: relative;
display: inline-block;
}
.mzhrttltp .hrttltptxt {
visibility: hidden;
width: 120px;
background-color: #040505;
font-size:13px;color:#fff;font-family:IranYekanWeb;
text-align: center;
border-radius: 3px;
padding: 4px 0;
position: absolute;
z-index: 1;
top: 105%;
left: 50%;
margin-left: -60px;
}
.mzhrttltp .hrttltptxt::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #040505 transparent;
}
.mzhrttltp:hover .hrttltptxt {
visibility: visible;
}
<div class="mzhrttltp"><svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="#e2062c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg><div class="hrttltptxt">علاقهمندیها</div></div>
I always go with the generic css title with my setup. I'm just building analytics for my blog admin page. I don't need anything fancy. Here's some code...
let comps = g.selectAll('.myClass')
.data(data)
.enter()
.append('rect')
...styling...
...transitions...
...whatever...
g.selectAll('.myClass')
.append('svg:title')
.text((d, i) => d.name + '-' + i);
And a screenshot of chrome...
I use heroicons for the project I am working on. (This is JSX format) I will handle the tooltip issue with this code.
<svg className="h-6 w-6">
<title>{reasons.join(" ")}</title>
<QuestionMarkCircleIcon className={style} />
</svg>