I am trying to get an svg to follow a path. But the svg circle just stays in one place and does not follow the path.
.LineSvg {
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="0 0 1167.85 841.719" className={styles.LineSvg}>
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" transform="translate(4767.054 2827.456)" />
<circle cx="123.2" cy="646" r="11.7" fill="#63c6be" >
<animateMotion
dur="2.2s"
/>
<mpath xlinkHref="#wire"></mpath>
<animateMotion />
</circle>
</svg>
It should start at the beginning of the path (line) and move to the top of the line.
There are a number of syntactical errors in the markup that prevent animation. When these are fixed the animation takes place off the screen because the path's transform is ignored by the mpath element.
The syntax is fixed below and I've adjusted the viewBox so the animation is visible.
I've removed the non-functional transform on the path element.
I've also added a fill="freeze" otherwise the circle disappears at the end as the path's displacement is so large.
Finally I've made the circle bigger so you can still see it in the larger viewBox.
.LineSvg{
fill: none;
stroke: $blue;
position: absolute;
margin-top: -2px;
left: 700px;
}
<svg xmlns="http://www.w3.org/2000/svg" width="1167.85" height="841.719" viewBox="-5000 -3000 5000 5000" className={styles.LineSvg} >
<path fill="none" id="wire" d="M-4766.667-2093.939s292-358.061,476-223.394S-4269.333-1874.667-3952-2028s221.818-437.333,9.576-338.667-154.546,321.212,151.515,272.727,193.333-429.818,17.576-487.394S-4220-2402.667-4429.333-2432s-317.333-102.667-257.333-232,429.091-48.121,474.545-163.273" />
<circle cx="123.2" cy="646" r="111.7" fill="#63c6be" >
<animateMotion
dur="2.2s" fill="freeze"
>
<mpath xlink:href="#wire"></mpath>
</animateMotion>
</circle>
</svg>
Related
I want to move a svg element outside of it's container but is hiding. I enabled overflow: visible still can't figured out the problem.
I created the svg with figma. Clip content is disabled
Here you have the code & a photo to better see the problem.
This SVG code might be helpful... Open this Snippet in full view..
/** Animation Boxes (Moving on cursor move) **/
.showcase-animation-container {
position: absolute;
right: 350px;
width: 500px;
height: 500px;
svg {
position: absolute;
top: 0;
left: 0;
overflow: visible !important;
width: 100%;
height: 100%;
}
}
.left-triangle { transform-origin: center center }
.left-triangle {
transform: translate(-180px, -70px) rotate(-50deg);
fill: red;
}
<div class="showcase-animation-container">
<svg width="736" height="589" viewBox="-80 0 556 589" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f)" style="
/* margin-left: 180px; */
">
<path class="left-triangle" d="M12.6269 323.5L130 82.9806L247.373 323.5H12.6269Z" stroke="black" stroke-width="7"></path>
<path d="M389.373 265.5L272 506.019L154.627 265.5H389.373Z" stroke="black" stroke-width="7"></path>
<path d="M308.627 323.5L426 82.9806L543.373 323.5H308.627Z" stroke="black" stroke-width="7"></path>
</g>
<defs>
<filter id="filter0_f" x="-180" y="-7" width="736" height="589" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
<feGaussianBlur stdDeviation="3.5" result="effect1_foregroundBlur"></feGaussianBlur>
</filter>
</defs>
</svg>
</div>
I updated the svg element, you can check it in the gist, i just increased the frame size in figma.
How to achieve a glowing straight line in svg，that some halo around it. I have tried filter, but it couldn't work on the straight line.
I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this?
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0">
</feColorMatrix>
<feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path d="M2 120 H 100" stroke="black" filter="url(#dangerShine)"/>
</svg>
I want to achieve this effect
the sketch is like this
Since your path is completely horizontal, it has zero height. The width of the line does not matter. If the width or the height of an element is zero, the filter will not work.
To avoid this problem, use an different element that has a non-zero height. For example, use a thin <rect> instead of a <path>.
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine" filterUnits="userSpaceOnUse"
x="-10" y="110" width="120" height="20">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feGaussianBlur in="color" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="0" dy="0" result="offset"/>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect x="2" y="120" width="100" height="1" fill="black" filter="url(#dangerShine)"/>
</svg>
Also, as you can see in my example, you may also have to manually adjust the filter region (x, y, width, height, and filterUnits), because the default values won't work well for such a thin element.
One way to make a div glow would be to use a CSS animation function. This is an easy alternative rather than manipulating an SVG.
I didn't use an SVG but instead just a made a div a line in HTML and CSS
Run the code snippet below to see how this works if you're unsure.
If the line is too wide, just adjust the size.
If the glowing is too fast/slow, adjust the timing.
e.g. .3s to 1s etc.
If you want to adjust the glowing effect spread, or feathering, or color, just play with the box-shadow settings.
Here is a great and lengthy article about how to manipulate SVGs and such.
https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
Hope this was somewhat helpful.
<style>
body {
margin: 0;
}
/*
The circle is here just to
show the transparency of the
glowing line.
*/
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: orange;
}
.line {
position: relative;
top: -100px;
width: 100vw;
height: 3px;
background: red;
animation: glow .3s infinite alternate ease-in-out;
}
#keyframes glow {
from {box-shadow: 0px;}
to {box-shadow: 0px 0px 20px rgba(255, 0, 0, 1);}
}
</style>
</head>
<body>
<div class="circle">
</div>
<div class="line">
</div>
<script></script>
</body>
</html>
Now you can create straight line from SVG. and set also thickness of straight line
<html>
<body>
<svg height="500" width="500">`enter code here`
<line x1="100" y1="100" x2="200" y2="100" style="stroke:rgb(111,0,0);stroke-width:5" />
</svg>
</body>
</html>
I am using an SVG/Path to generate a large upward pointing triangle...see the related link below for some background info.
Background Info
What I am trying to do is add an inset, blurred shadow (simiar to box-shadow) on two sides of the triangle (top-left and top-right), but not the base of the triangle. Also trying to taper the shadow so that it does not touch the base of the triangle. The following link is screenshot with a rough, but not exact, idea of what I am looking to do.
Shadow Example
Here is the code I have so far:
svg#bigTriangleColor {
pointer-events: none; background: red;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #EEEEEE;
stroke: #EEEEEE;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
Thanks in advance, any help is greatly apprecizted...
Add a grey shape behind the triangle to represent the shadow. Then blur it.
<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
<polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>
I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangle, basic the inverse. Does any one know how to tweak this code to accomplish that?
Your help is greatly appreciated.
Best Regards...
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path d="M0 0 L50 100 L100 0 Z"></path>
</svg>
You can easily do that understanding the line commands in an SVG path.
What we have here:
<path d="M0 0 L50 100 L100 0 Z"></path>
Says:
Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.
So, to invert the triangle, you just need:
<path d="M0 100 L50 0 L100 100 Z"></path>
Which basicaly says:
Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.
Check the demo:
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
You could just draw it upside down using a transform.
translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
scale inverts it in the y direction
svg#bigTriangleColor {
pointer-events: none;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #3498db;
stroke: #3498db;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>
Is it possible to have the < use > element display the rect tooltip, on mouse over, with modern browsers?
As specified by 15.2.1 The hint element.
<svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pnp-transistor">
<image xlink:href="transistor.png" height="32px" width="32px" />
<rect y="0" x="0" height="6px" width="32px">
<title>collector</title>
<hint>collector</hint>
</rect>
<rect y="27" x="0" height="6px" width="32px">
<title>emitter</title>
<hint>emitter</hint>
</rect>
<rect y="0" x="0" height="32px" width="6px">
<title>base</title>
<hint>base</hint>
</rect>
</symbol>
<use xlink:href="#pnp-transistor"></use>
</svg>
There appears to be no way to do this without JavaScript, using getBoundingClientRect() to location the position of the SVG in the DOM. Good stuff in here: How to add a tooltip to an svg graphic. Even then, I'm not sure how well supported and easy to style that direction would be.
However, a possible workaround is to add another wrapper around symbol and tie CSS into it when hovering on the pseudoclass. Using attr(data-tooltip) is not as nice as using content directly inherited by the symbol, but it's not a terrible second place.
For example:
<div class="wrapper" data-tooltip="SVG Tooltip (almost)">
<svg class="icon"><use xlink:href="#some-id"></use></svg>
</div>
...
.wrapper:after {
position: absolute;
left: 50%;
transition: 0.5s;
content: attr(data-tooltip);
white-space: nowrap;
opacity: 0;
font-size: 1.5rem;
transform: translate(-50%, 0);
}
.wrapper:hover:after {
position: absolute;
opacity: 1;
transform: translate(-50%, 0.5em);
}
Codepen: SVG With Pure CSS Tooltip