Why do I need to update strokeDashoffset after updating strokeDasharray? - javascript

In the following, I create a red circle that is drawn only part way around the edge. If I set strokeDasharray to 500 628, which should be the dash length and dash offset, I get the partial circle I am looking for. However, I cannot, afterwards, just set strokeDasharray = "600" afterwards to only set the dash length. I must include the dash offset as previous strokeDasharray = "600 628".
Why can't I change the dash length by itself?
The actual code is this line: el.style.strokeDasharray="500 628";
I would just like to change it by doing this: el.style.strokeDasharray="200";
var el=document.getElementsByTagName("circle")[0];
el.style.strokeDasharray="500 628";
svg {
width: 240px;
height: 240px;
background: #eee;
transform:rotate(-90deg);
}
svg #shape {
fill: none;
stroke: red;
stroke-width: 4;
}
<svg>
<circle id='shape' cx='120' cy='120' r='100' />
</svg>

No, the 2nd value you are passing is not the strokeDashoffset. It is a 2nd length value.
According to documentation:
A list of comma and/or white space separated lengths (which can have a unit identifier) and percentages. A percentage represents a distance as a percentage of the current viewport. A negative value is an error. If the sum of the values is zero, then the stroke is rendered as if a value of none were specified.
You can see in this example that it is different:
svg {
width: 240px;
height: 240px;
background: #eee;
transform:rotate(-90deg);
}
svg #shape1 {
fill: none;
stroke: red;
stroke-width: 4;
stroke-dasharray: 600 100;
}
svg #shape2 {
fill: none;
stroke: blue;
stroke-width: 4;
stroke-dasharray: 600;
stroke-dashoffset: 100;
}
<svg>
<circle id='shape1' cx='120' cy='120' r='100' />
</svg>
<svg>
<circle id='shape2' cx='120' cy='120' r='100' />
</svg>

Related

Issue with SVG path not animating as expected

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.

How create text composing with rectangle? (canvas, pixi.js, three.js)

My task is to make a dynamic progress bar.
Firstly, the time that remains until a certain date should change. There are no problems with this. The main question is how to make the numbers fill in the contour? (this circuit is also considered dynamically from the remaining one)
Interested in a solution on a blank canvas or three.js or pixi.js Screenshot
This is easily possible using svg and a tiny bit of javascript.
The trick is to use a linear-gradient (that is actually just a single sharp step) to fill the text.
Working example:
const input = document.querySelector("input");
const gradientStops = Array.from(
document.querySelectorAll("#fillGradient stop")
);
input.addEventListener("input", ev => {
// value is a number between 0 and 1
const value = ev.target.valueAsNumber;
gradientStops.forEach(stop => {
stop.offset.baseVal = value;
});
});
body { margin: 0; background: red; font-family: sans-serif; }
svg { width: 100%; height: auto; color: white; }
svg text {
font-size: 60px;
font-weight: bold;
stroke: currentColor;
stroke-width: 1px;
fill: url(#fillGradient)
}
input { position: fixed; bottom: 1em; display: block; width: 90%; margin: 0 5%; }
<svg viewBox="0 0 400 200">
<defs>
<linearGradient id="fillGradient">
<stop offset="50%" stop-color="currentColor" />
<stop offset="50%" stop-color="transparent" />
</linearGradient>
</defs>
<text x="0" y="60">10D:20:42:12</text>
</svg>
<input type="range" min=0 max=1 step=0.001 />
If you need to do this based on canvas, I think the easiest way would be like
render the text with white stroke and fill
use clearRect to remove the part of the text
render the text again, this time with transparent fill-color

is it possible make a text color to inherit a its parent background color? [duplicate]

Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS?
It would be sad to lose all precious SEO because of images replacing text.
I first thought of shadows but I can't figure anything out...
The image is the site background, an absolute positioned <img> tag
It's possible with css3 but it's not supported in all browsers
With background-clip: text; you can use a background for the text, but you will have to align it with the background of the page
body {
background: url(http://www.color-hex.com/palettes/26323.png) repeat;
margin:10px;
}
h1 {
background-color:#fff;
overflow:hidden;
display:inline-block;
padding:10px;
font-weight:bold;
font-family:arial;
color:transparent;
font-size:200px;
}
span {
background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
}
<h1><span>ABCDEFGHIKJ</span></h1>
http://jsfiddle.net/JGPuZ/1337/
Automatic Alignment
With a little javascript you can align the background automatically:
$(document).ready(function(){
//Position of the header in the webpage
var position = $("h1").position();
var padding = 10; //Padding set to the header
var left = position.left + padding;
var top = position.top + padding;
$("h1").find("span").css("background-position","-"+left+"px -"+top+"px");
});
body {
background: url(http://www.color-hex.com/palettes/26323.png) repeat;
margin:10px;
}
h1 {
background-color:#fff;
overflow:hidden;
display:inline-block;
padding:10px;
font-weight:bold;
font-family:arial;
color:transparent;
font-size:200px;
}
span {
background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>
​
http://jsfiddle.net/JGPuZ/1336/
Although this is possible with CSS, a better approach would be to use an inline SVG with SVG masking. This approach has some advantages over CSS :
Much better browser support: IE10+, chrome, Firefox, safari...
This doesn't impact SEO as spiders can crawl SVG content (google indexes SVG content since 2010)
CodePen Demo : SVG text mask
body,html{height:100%;margin:0;padding:0;}
body{
background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
background-size:cover;
background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
<defs>
<mask id="mask" x="0" y="0" width="100" height="50">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
<text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
</mask>
</defs>
<rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
</svg>
If you aim on making the text selectable and searchable, you need to include it outside the <defs> tag. The following example shows a way to do that keeping the transparent text with the <use> tag:
body,html{height:100%;margin:0;padding:0;}
body{
background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
background-size:cover;
background-attachment:fixed;
}
svg{width:100%;}
<svg viewbox="0 0 100 60">
<defs>
<g id="text">
<text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
<text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
</g>
<mask id="mask" x="0" y="0" width="100" height="50">
<rect x="0" y="0" width="100" height="40" fill="#fff"/>
<use xlink:href="#text" />
</mask>
</defs>
<rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
<use xlink:href="#text" mask="url(#mask)" />
</svg>
There is a simple way to do this with just CSS:
background: black;
color: white;
mix-blend-mode: multiply;
for transparent text on a black background, or
background: white;
color: black;
mix-blend-mode: screen;
for transparent text on a white background.
Put these styles on your text element with whichever background you want behind it.
Example CodePen
Read up on mix-blend-mode and experiment with it to use different colours.
Caveats:
For this to work in chrome, you also need to explicitly set a background colour on the html element.
This works on basically all modern browsers except IE.
It is possible, but so far only with Webkit based browsers (Chrome, Safari, Rockmelt, anything based on the Chromium project.)
The trick is to have an element within the white one that has the same background as the body, then use -webkit- background-clip: text; on the inner element which basically means "don't extend the background beyond the text" and use transparent text.
section
{
background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
width: 100%;
height: 300px;
}
div
{
background: rgba(255, 255, 255, 1);
color: rgba(255, 255, 255, 0);
width: 60%;
heighT: 80%;
margin: 0 auto;
font-size: 60px;
text-align: center;
}
p
{
background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
-webkit-background-clip: text;
}
​
http://jsfiddle.net/BWRsA/
just put that css
.banner-sale-1 .title-box .title-overlay {
font-weight: 900;
overflow: hidden;
margin: 0;
padding-right: 10%;
padding-left: 10%;
text-transform: uppercase;
color: #080404;
background-color: rgba(255, 255, 255, .85);
/* that css is the main think (mix-blend-mode: lighten;)*/
mix-blend-mode: lighten;
}
I just discovered a new way to do this while messing around, I'm not entirely sure how it works ( if someone else wants to explain please do ).
It seems to work very well, and requires no double backgrounds or JavaScript.
Here's the code:
JSFIDDLE
body {
padding: 0;
margin: 0;
}
div {
background: url(http://www.color-hex.com/palettes/26323.png) repeat;
width: 100vw;
height: 100vh;
}
body::before {
content: '$ALPHABET';
left: 0;
top: 0;
position: absolute;
color: #222;
background-color: #fff;
padding: 1rem;
font-family: Arial;
z-index: 1;
mix-blend-mode: screen;
font-weight: 800;
font-size: 3rem;
letter-spacing: 1rem;
}
<div></div>
In the near future we can use element() to achieve this
The element() function allows an author to use an element in the document as an image. As the referenced element changes appearance, the image changes as well ref
The trick is to create a common div with text then use element() combined with mask.
Here is a basic example that works only on the latest version Firefox for now.
#text {
font-size:35px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
background:red;
-webkit-mask:
-moz-element(#text) center/contain no-repeat, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
}
<div id="text">
You can put your text here
</div>
<div class="main">
</div>
It will produce the following:
It's reponsive since we rely on basic background properties and we can easily update the text using basic CSS.
We can consider any kind of content and also create patterns:
#text {
font-size:30px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
padding:20px;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
#text span {
font-family:cursive;
font-size:35px;
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
background:red;
-webkit-mask:
-moz-element(#text) 0 0/20% auto, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
}
<div id="text">
Your <span>text</span> here 👍
</div>
<div class="main">
</div>
And why not some animation to create an infinite scrolling text:
#text {
font-size:30px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
padding:20px 5px;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
padding-right:calc(50% - 50px);
background:red;
-webkit-mask:
-moz-element(#text) 0 50%/200% auto content-box, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
animation:m 5s linear infinite;
}
#keyframes m{
to {-webkit-mask-position:200% 50%}
}
<div id="text">
Srolling repeating text here
</div>
<div class="main">
</div>
I guess you could achieve something like that using background-clip, but I haven't tested that yet.
See this example:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(Webkit only, I don't know yet how to change the black background to a white one)
You can use an inverted / negative / reverse font and apply it with the font-face="…" CSS rule. You might have to play with letter spacing to avoid small white gaps between letters.
If you do not require a specific font, it's simple. Download a likeable one, for example from this collection of inverted fonts.
If you require a specific font (say, "Open Sans"), it's difficult. You have to convert your existing font into an inverted version. This is possible manually with Font Creator, FontForge etc., but of course we want an automated solution. I could not find instructions for that yet, but some hints:
How to convert a bitmap font into a TrueType font (plus yet another way to do that). One would first use ImageMagick commands to render the font glyphs into high-resolution raster images and to invert them, then convert them back to a TrueType font with the above instructions.
Is it possible to invert a font with FontForge or another PGM?
Creating a reverse (white on black) font
You can use myadzel's Patternizer jQuery plugin to achieve this effect across browsers. At this time, there is no cross-browser way to do this with just CSS.
You use Patternizer by adding class="background-clip" to HTML elements where you want the text to be painted as an image pattern, and specify the image in an additional data-pattern="…" attribute. See the source of the demo. Patternizer will create an SVG image with pattern-filled text and underlay it to the transparently rendered HTML element.
If, as in the question's example image, the text fill pattern should be a part of a background image extending beyond the "patternized" element, I see two options (untested, my favourite first):
Use masking instead of a background image in the SVG. As in web-tiki's answer, to which using Patternizer will still add automatic generation of the SVG and an invisible HTML element on top that allows text selection and copying.
Or use automatic alignment of the pattern image. Can be done with JavaScript code similar to the one in Gijs's answer.
I needed to make text that looked exactly like it does in the original post, but I couldn't just fake it by lining up backgrounds, because there's some animation behind the element. Nobody seems to have suggested this yet, so here's what I did: (Tried to make it as easy to read as possible.)
var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.
//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;
//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
"<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
"<mask id='txtSubMask'>"+
"<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
"<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
"</mask>"+
"</svg>";
//Relevant Helper Functions:
function centeredDiv(parent) {
//Container:
var d = document.createElement('div'), s = d.style;
s.display = "table"; s.position = "relative"; s.zIndex = 999;
s.top = s.left = 0; s.width = s.height = "100%";
//Content Box:
var k = document.createElement('div'), j = k.style;
j.display = "table-cell"; j.verticalAlign = "middle";
j.textAlign = "center"; d.appendChild(k);
parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
var d = document.createElement('div');
if(tCont) d.textContent = tCont;
parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
return context.measureText(text).width;
}
Just throw that in your window.onload, set the body's background to your image, and watch the magic happen!
mix-blend-mode is also a possibility for that kind of effect .
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
h1 {
background:white;
mix-blend-mode:screen;
/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}
html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
This worked for me mix-blend-mode: color-dodge on the container with opposite colors.
.main{
background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
height: 80vh;
width: 100vw;
padding: 40px;
}
.container{
background-color: white;
width: 80%;
height: 50px;
padding: 40px;
font-size: 3em;
font-weight: 600;
mix-blend-mode: color-dodge;
}
.container span{
color: black;
}
<div class="main">
<div class="container">
<span>This is my text</span>
</div>
</div>
Not possible with CSS just now I'm afraid.
Your best bet is to simply use an image (probably a PNG) and and place good alt/title text on it.
Alternatively you could use a SPAN or a DIV and have the image as a background to that with your text you want for SEO purposes inside it but text-indent it off screen.

How to make an :hover effect on two overlapping shapes in SVG?

I have been struggling for days about this but it seems that I will not solve this on my own. I hope someone can help...or just tell me it is not possible at all and I will find another way :)
Here is a simplified version of my problem:
.left {
fill: yellow;
pointer-events: visible;
}
.left:hover {
opacity: 0.3;
}
.middle {
fill: red;
pointer-events: visible;
}
.middle:hover {
opacity: 0.8;
pointer-events: visible;
}
.right {
fill: blue;
}
.right:hover {
opacity: 0.6;
pointer-events: visible;
}
<svg class="test" width="500px" height="500px">
<g name="Layer" class="group">
<ellipse class="left" cx="120" cy="160" rx="80" ry="81" />
<ellipse class="right" cx="342" cy="271" rx="93" ry="97" />
<ellipse class="middle" cx="223" cy="176" rx="115" ry="153" />
</g>
</svg>
When hovering over an ellipse, its opacity is modified. This is OK.
What I would like to achieve is when hovering over an intersection of two ellipses, the two defined :hover of the concerned ellipses are triggered. Currently, when the mouse pointer is over the red ellipse AND the blue ellipse (in the intersection), only the red one is concerned by the hover.
I cannot group them because:
All 3 ellipses will be considered as hovered all the time
The :hover effect differs
I thought the whole point of 'pointer-events' was to deal with multiple overlapping shapes at a time but I have been trying to use that property in every possible way, without success.
I am using Reactjs so any possible hint on a Javascript solution would help.
I love the solution #Connum came with but I think it can be simplified:
let ellipses = document.querySelectorAll("ellipse")
function getAllElementsFromPoint(rootEl, x, y) {
var item = document.elementFromPoint(x, y);
//in this case is tagName == "ellipse" but you can find something else in commun, like a class - for example.
while (item && item.tagName == "ellipse") {
item.classList.add("hover")
item.style.pointerEvents = "none";
item = document.elementFromPoint(x, y);
}
}
var svg = document.querySelector('svg.test');
svg.addEventListener('mousemove', function(ev) {
// first add pointer-events:all and remove the class .hover from all elements
ellipses.forEach(e=> {
e.style.pointerEvents = "all";
e.classList.remove('hover');
});
// then get all elements at the mouse position
// and add the class "hover" to them
getAllElementsFromPoint(svg, ev.clientX, ev.clientY)
});
.left {
fill: yellow;
}
.left.hover {
opacity: 0.3;
}
.middle {
fill: red;
}
.middle.hover {
opacity: 0.8;
}
.right {
fill: blue;
}
.right.hover {
opacity: 0.6;
}
svg {
border: 1px solid;
}
<svg class="test" width="500px" height="500px">
<g name="Layer" class="group">
<ellipse class="left" cx="120" cy="160" rx="80" ry="81" />
<ellipse class="right" cx="342" cy="271" rx="93" ry="97" />
<ellipse class="middle" cx="223" cy="176" rx="115" ry="153" />
</g>
</svg>
Using getIntersectionList() as demonstrated in this very similar question is probably the cleanest and most performant solution. However, it is not yet supported by Firefox, so I came up with a solution based on a slightly adapted function taken from this answer to another question.
But caution: This is probably very performance-hungry due to the combination of the mousemove event with two forEach loops iterating over DOM elements, combined with the re-rendering that might be caused due to hiding/showing the elements for a minimal amount of time, depending on how the client will handle and optimize this. So this will possibly cause very poor performance on weaker devices. Having said that, it seems to work in all major browsers (tested in Firefox, Chrome and Edge; I haven't tried IE though).
In the comments to the answer in the second link I provided, there's a suggestion for another function using CSS' pointer-events instead of hiding the elements. One would have to compare the performance of those two approaches to decide which one to use best.
function getAllElementsFromPoint(rootEl, x, y) {
var elements = [];
var display = [];
var item = document.elementFromPoint(x, y);
while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement && item !== rootEl) {
elements.push(item);
display.push(item.style.display);
item.style.display = "none";
item = document.elementFromPoint(x, y);
}
// restore display property
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = display[i];
}
return elements;
}
var svg = document.querySelector('svg.test');
svg.addEventListener('mousemove', function(ev) {
// first remove the class .hover from all elements
svg.querySelectorAll('*').forEach(function(subEl) {
subEl.classList.remove('hover');
});
// then get all elements at the mouse position
// and add the class "hover" to them
getAllElementsFromPoint(svg, ev.clientX, ev.clientY).forEach(function(hoveredEl) {
hoveredEl.classList.add('hover');
})
});
.left {
fill: yellow;
pointer-events: visible;
}
.left:hover,
.left.hover {
opacity: 0.3;
}
.middle {
fill: red;
pointer-events: visible;
}
.middle:hover,
.middle.hover {
opacity: 0.8;
pointer-events: visible;
}
.right {
fill: blue;
}
.right:hover,
.right.hover {
opacity: 0.6;
pointer-events: visible;
}
<svg class="test" width="500px" height="500px">
<g name="Layer" class="group">
<ellipse class="left" cx="120" cy="160" rx="80" ry="81" />
<ellipse class="right" cx="342" cy="271" rx="93" ry="97" />
<ellipse class="middle" cx="223" cy="176" rx="115" ry="153" />
</g>
</svg>

How to add a tooltip to an svg graphic?

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>

Categories