Hover functionality not working on svg path - javascript

I'm trying to get a :hover functionality on my svg path. In short, I want my path to fill with red when hovered over.
my CSS has:
.node_hover {
/* fill-opacity: 1;
fill: crimson;
transition: 0.3s; */
fill-opacity: 0;
}
.node_hover:hover {
fill-opacity: 1;
fill: black;
transition: 0.3s;
}
and my svg is
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g className = "node_hover">
<path id="Imported Path .... />
</g>
</svg>
However nothing happens upon hover. I tried giving the className to my path itself but that doesn't work. either.
Any help would be appreciated.

I think the issue is a typo. className should be class
.node_hover {
fill: black;
transition: 0.3s;
}
.node_hover:hover {
fill: red;
transition: 0.3s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g class = "node_hover">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>

Related

How do I set my SVG icons' background to be transparent?

Update:
My interpretation of the problem was incorrect. Rather than the background turning black, the stroke was being scaled incorrectly. It just appeared to have a black background. I have reported the bug to Bugzilla
Original Question:
I have a Firefox extension that has a browser action and a context menu item with custom icons (the same icon). I have been using PNG images for the icons, but I want to switch to SVG icons. The only problem with SVG icons is that Firefox fills in the background with black, rather than keeping it transparent. I have checked the icon's transparency by opening it with several apps, all of which naturally give the SVG a transparent background. Why does Firefox not recognize its transparency when I use it as an extension's context menu item's icon or a browser action's icon?
Here is a snippet with proof that the icon is transparent:
body {
background-color: red;
animation-name: changeColors;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changeColors {
from {
background-color: red;
}
to {
background-color: green;
}
}
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketchjs="https://sketch.io/dtd/" sketchjs:metadata="eyJuYW1lIjoiRHJhd2luZyIsInN1cmZhY2UiOnsiaXNQYWludCI6dHJ1ZSwibWV0aG9kIjoiZmlsbCIsImJsZW5kIjoibm9ybWFsIiwiZW5hYmxlZCI6dHJ1ZSwib3BhY2l0eSI6MSwidHlwZSI6InBhdHRlcm4iLCJwYXR0ZXJuIjp7InR5cGUiOiJwYXR0ZXJuIiwicmVmbGVjdCI6Im5vLXJlZmxlY3QiLCJyZXBlYXQiOiJyZXBlYXQiLCJzbW9vdGhpbmciOmZhbHNlLCJzcmMiOiJ0cmFuc3BhcmVudExpZ2h0Iiwic3giOjEsInN5IjoxLCJ4MCI6MC41LCJ4MSI6MSwieTAiOjAuNSwieTEiOjF9LCJpc0ZpbGwiOnRydWV9LCJjbGlwUGF0aCI6eyJlbmFibGVkIjp0cnVlLCJzdHlsZSI6eyJzdHJva2VTdHlsZSI6ImJsYWNrIiwibGluZVdpZHRoIjoxfX0sImRlc2NyaXB0aW9uIjoiTWFkZSB3aXRoIFNrZXRjaHBhZCIsIm1ldGFkYXRhIjp7fSwiZXhwb3J0RFBJIjo3MiwiZXhwb3J0Rm9ybWF0IjoicG5nIiwiZXhwb3J0UXVhbGl0eSI6MC45NSwidW5pdHMiOiJweCIsIndpZHRoIjoxMjgsImhlaWdodCI6MTI4LCJwYWdlcyI6W3sid2lkdGgiOjEyOCwiaGVpZ2h0IjoxMjh9XSwidXVpZCI6Ijg4OWIxNzZlLWJlOTEtNGNlYS1hZTRjLWY5MGVhNWI0YzFiYiJ9" width="128" height="128" viewBox="0 0 128 128">
<path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.7; stroke-width: 15; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.0804830483049923,10.000000000200153,10.332170735958027)"/>
<path style="fill: #242529; stroke: #121212; mix-blend-mode: source-over; paint-order: stroke fill markers; fill-opacity: 1; stroke-dasharray: none; stroke-dashoffset: 0; stroke-linecap: round; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 0.6666666666666667; stroke-width: 20; vector-effect: non-scaling-stroke;" sketchjs:tool="circle" d="M50 0 C77.614 0 100 22.386 100 50 100 77.614 77.614 100 50 100 22.386 100 0 77.614 0 50 0 22.386 22.386 0 50 0 z" transform="matrix(1.0804830483049923,0,0,1.0804830483049923,10.000000000200153,10.000000000199847)"/>
<path style="fill: #999999; mix-blend-mode: source-over; fill-opacity: 1;" sketchjs:tool="path" d="M0 75.09 C75.48 68.13 71.72 0 71.72 0 71.72 0 105.68 98.51 1.17 75.85 " transform="matrix(0.8743546320957299,0,0,0.8743546320957296,40.281708922438206,37.527195340009996)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.249 0 L15.848 7.294 23.898 8.464 18.073 14.141 19.448 22.158 12.249 18.373 5.049 22.158 6.424 14.141 0.599 8.464 8.649 7.294 z" transform="matrix(0.697355799061732,-0.13642022494671896,0.13642022494671896,0.697355799061732,41.265182438537245,79.6845481140266)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M9.084 0 L11.754 5.41 17.724 6.277 13.404 10.488 14.424 16.434 9.084 13.626 3.745 16.434 4.764 10.488 0.445 6.277 6.414 5.41 z" transform="matrix(0.9902159962126372,0.13954311464423616,-0.13954311464423616,0.9902159962126372,20.83972994628792,35.244013452720175)"/>
<path style="fill: #ffe067; mix-blend-mode: source-over; fill-opacity: 1; vector-effect: non-scaling-stroke;" sketchjs:tool="star" d="M12.182 0 L15.762 7.254 23.768 8.418 17.975 14.064 19.343 22.038 12.182 18.273 5.022 22.038 6.389 14.064 0.596 8.418 8.602 7.254 z" transform="matrix(0.9975510002532796,0.06994284733753305,-0.06994284733753305,0.9975510002532796,77.22221836207314,21.377447387233143)"/>
</svg>
Here are screenshots of the icon not being transparent:
I am also changing the icon using browser.browserAction.setIcon() in the background page, but that shouldn't affect anything.
Update:
Turns out I misunderstood the idea of a "non-scaling-stroke." The stroke was just being scaled up and I misunderstood the stroke for an opaque background.
Original Answer:
I've found the culprit: vector-effect: non-scaling-stroke; in the style. While it's a nice effect, it isn't important enough to create an opaque background. I wonder why Firefox gives the icon an opaque background when that effect is included... Perhaps we will be able to use later if Mozilla wants to fix it.
Here is a snippet with proof that the icon is transparent
But, this is not true..
You have the solid fills and "fill-opacity: 1" everywhere..
fill-opacity should be 0 for a transparency!
Or fill should be none.

Text is translated downward when rotated

I am createing a reset button for a sumulation as part of a web app. when you click the button it spins the reset icon. To do this I am using transform rotate to spin a text element, but when I spin it it it ends up lower than when it started. I have no idea why this is happening but googling the answer has got me nowhere.
any help is appreciated thx.
keyframes:
#keyframes spin360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
I call the keyframes in javascript using this function:
function spin() {
document.getElementById("resetButtonSvg").style.animation = "spin360 0.5s ease forwards";
}
*note it is called resetButtonSvg because I was planning to use an SVG but instead I ended up using Unicode.
just change your html to something like this
<button onclick="spin()">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="resetButtonSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 179.019 179.019" style="enable-background:new 0 0 179.019 179.019;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M138.121,138.357c-13.02,13.008-30.312,20.174-48.714,20.174c-37.955,0-68.84-30.867-68.876-68.81
l14.046,14.064c0.931,0.925,2.429,0.925,3.359,0c0.919-0.931,0.919-2.434,0-3.359L19.315,81.797L0.698,100.426
c-0.931,0.925-0.931,2.429,0,3.359c0.459,0.465,1.068,0.692,1.671,0.692c0.615,0,1.223-0.233,1.677-0.692l11.826-11.832
c1.235,39.531,33.689,71.328,73.512,71.328c19.673,0,38.164-7.661,52.079-21.57c0.925-0.925,0.925-2.429,0-3.353
C140.562,137.426,139.052,137.426,138.121,138.357z"/>
<path style="fill:#010002;" d="M178.32,75.234c-0.919-0.925-2.423-0.925-3.353,0L163.152,87.06
c-1.247-39.531-33.701-71.322-73.518-71.322c-19.685,0-38.17,7.661-52.085,21.57c-0.931,0.925-0.931,2.429,0,3.353
c0.919,0.931,2.429,0.931,3.353,0c13.014-13.008,30.312-20.174,48.714-20.174c37.949,0,68.84,30.861,68.888,68.81l-14.058-14.064
c-0.925-0.925-2.429-0.925-3.359,0c-0.919,0.931-0.919,2.434,0,3.359l18.623,18.623l18.617-18.623
C179.251,77.668,179.251,76.164,178.32,75.234z"/>
</g>
</g>
</svg>
</button>
and also apply this css on the button and the svg
button {
display: flex;
align-items: center;
padding: 10px;
}
svg {
width: 25px;
height: 25px;
}

Can I generate SVG with js?

I'm looking for a way to generate the following SVG with javascript.
I honestly have no idea on how to do it, neither I know if it's possible!
Since this is for an university project, I'm only allowed to use pure javascript, with no libraries.
EDIT: if it can help, I also have the .svg file. I can't use .png because I need to animate 2 elements within it.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225.5 225.5" style="enable-background:new 0 0 225.5 225.5;" xml:space="preserve">
<path id="Luna1" class="st0" d="M112.8,225.5C50.5,225.5,0,175,0,112.8S50.5,0,112.8,0V225.5z"/>
<path id="Luna2" class="st1" d="M112.8,0C175,0,225.5,50.5,225.5,112.8S175,225.5,112.8,225.5V0z"/>
<circle id="Cerchio1" class="st2" cx="46.4" cy="112.8" r="18.4"/>
<circle id="Cerchio2" class="st2" cx="179.1" cy="112.8" r="18.4"/>
</svg>
<style type="text/css">
.st0{fill:#6DC06B;}
.st1{fill:#0B7660;}
.st2{fill:#17AF80;}
svg {
width: 200px;
height: 200px;
cursor: pointer;
transform: rotate(45deg);
}
.st2 {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
</style>
Here's the full code that includes the animationon Fiddle!
I would really appreciate any help! Thank you in advance!
Let me know if you need any further details!
You can create nodes and add them to an SVG element like this:
// store namespace
let ns = "http://www.w3.org/2000/svg"
// create svg element
let svg = document.createElementNS(ns, "svg")
document.body.appendChild(svg)
// set width and height
svg.setAttribute("width", "100")
svg.setAttribute("height", "100")
// just an example to create a path
let path = document.createElementNS(ns, "path")
path.setAttributeNS(null, "stroke-width", 2)
path.setAttributeNS(null, "d", "M300 200 m-10.292521287196118 -2.2297708853450806 l-8.789109120138724 -1.6054377906297648")
// add the path to the svg
svg.appendChild(path)
EDIT
Added option to create the SVG tag as well.

Using a circle SVG, how to animate a dashed progress bar to show a certain percentage?

I currently have an SVG with three circle elements.
Circle 1: Grey border (bottom layer)
Circle 2: Red Dashed border (mid layer)
Circle 3: Blue border (top layer)
I am able to animate the Circle 3 (Blue) to show 40%.
Unfortunately though, Circle 2 (Red) is around the entire circle (100%) instead of 80%.
So my questions are...
Can Circle 2 be animated the same as Circle 3 and occupy only 80%? Or is it not possible because of stroke-dasharray: 0.2em (line 93 in the CSS)?
In the css (line 81 and line 87), I have vector-effect: non-scaling-stroke commented out. I would like to uncomment those two lines but unfortunately the progress circular bar doesn't look correct. Any possible way to make the stroke not responsive while having the desired animation/look?
Any help is appreciated!
Here's the Codepen: https://codepen.io/anon/pen/oaVrpE
P.S.
I'm able to do the animation by adding the "active" class to the circle elements. That class gets added by the buttons. Finally, the "active" class calls the keyframe names in the CSS.
Snippet of the HTML and CSS codes but please do check out the codepen above.
HTML
<svg id="categoryIcon" data-name="category icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" width="100%" height="100%" class="catIcon userIcon">
<circle class="filler-loader fill-line" cx="48" cy="48" r="47" />
<circle class="filler-loader path path-dashed" cx="48" cy="48" r="47" />
<circle class="filler-loader path path-progress" cx="48" cy="48" r="47" />
<path d="M1536 1399q0 109-62.5 187t-150.5 78H469q-88 0-150.5-78T256 1399q0-85 8.5-160.5t31.5-152 58.5-131 94-89T583 832q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5T896 896 624.5 783.5 512 512t112.5-271.5T896 128t271.5 112.5T1280 512z" transform="translate(26, 25), scale(0.025)"/>
</svg>
CSS
svg.catIcon {
overflow: visible;
display: inline-block;
position: absolute;
top: 0;
left: 0;
.filler-loader {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.fill-line {
fill: #fff;
stroke: #e3e3e3;
stroke-width: 8px;
// vector-effect: non-scaling-stroke;
}
.path {
fill: none;
stroke-width: 8px;
// vector-effect: non-scaling-stroke;
stroke-dasharray: $dashOffset;
stroke-dashoffset: $dashOffset;
&-dashed {
&.active {
stroke-dasharray: 0.2em;
stroke: red;
}
}
&-progress {
&.active {
stroke: blue;
}
}
}
&.userIcon {
.path-dashed {
&.active {
animation: circProgress80 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
clip-path: url("#circleMask");
}
}
.path-progress {
&.active {
animation: circProgress40 1.5s cubic-bezier(.6, .09, 0, .94) forwards;
}
}
}
}

How to animate svg path with jQuery/JavaScript?

I'd like to animate an svg's path. I know this can be achieved with <animate>, but the animation starts only after the element is appended to some div. So I need to find another solution, but I weren't able to find any help online.
Here is the fiddle so you can take a look at what I have.
Note: Now I'd like the svg's path to stretch the svg. So at first, it is a triangle, but it needs to smoothly convert into a square that fits the svg around it.
Thank you!
// -- click the path -- //
$('path').on('click touch', function() {
$(this).parents('svg').css({
height: '100vh',
width: '100vw'
});
})
/* -- click the path -- */
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden; /* -- just for this example */
}
svg {
-webkit-transition:
height 350ms ease-in-out,
width 350ms ease-in-out;
transition:
height 350ms ease-in-out,
width 350ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- click the path -->
<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
<path d="M0 0 L405 0 L405 635"/>
</svg>
SMIL animations (ie. ones using <animate>) can be made to start on a click.
<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
<path d="M0 0 L405 0 L405 635 L405 635">
<animate attributeName="d" dur="350ms" to="M0 0 L405 0 L405 635 L0 635"
begin="click" fill="freeze" />
</path>
</svg>

Categories

Resources