I would like to change opacity of an inline SVG path from CSS. Here is the code :
canvas { background-color:#777;}
svg { position:absolute; top: 0px;left:0px;}
#circle:hover {opacity: 0.9;}
#square:hover {opacity: 0.9;}
<canvas width="300px" height="300px"></canvas>
<svg height="300" width="300" pointer-events="none" >
<circle id="circle" cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red" pointer-events="all" opacity="0.3"/>
<path id="square" d="M150 150 H 250 V 250 H 150 L 150 150" opacity="0.3"/>
</svg>
As you'll notice, it works with the circle, but not with the path. My questions are:
Why isn't it working with the path?
What should I do to apply the hover opacity to the path?
The path inherits pointer-events="none" from its parent.
The circle doesn't because it overrides that parent pointer-events value.
If you want something to respond to mouse events, don't have it set it as pointer-events none.
Remove pointer-events="none" then it will work fine.
Pointing none The element does not react to pointer events. Hence it doesn't work.
See details
canvas { background-color:#777;}
svg { position:absolute; top: 0px;left:0px;}
#circle:hover {opacity: 0.9;}
#square:hover {opacity: 0.9;}
<canvas width="300px" height="300px"></canvas>
<svg height="300" width="300" >
<circle id="circle" cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red" pointer-events="all" opacity="0.3"/>
<path id="square" d="M150 150 H 250 V 250 H 150 L 150 150" opacity="0.3"/>
</svg>
I have got an SVG image which I need to put in the header of my webpage. The edges of the image are pixelated and this bothers me. Now my question is if there is some kind of way to remove these pixelated edges from the SVG. Below is an example of my SVG.
The orange part is the SVG image I'm talking about.
Check the shape-rendering attributes of your SVG objects. The default setting should look pretty smooth, but with shape-rendering="crispEdges" it's going to look a bit jagged.
<svg width="300" height="100" viewBox="0 0 300 100">
<path d="M-10 0 C 100 70 200 50 310 40" stroke="orange" fill="transparent"
stroke-width="60" shape-rendering="auto"/>
<text x="10" y="90">(auto)</text>
</svg>
<svg width="300" height="100" viewBox="0 0 300 100">
<path d="M-10 0 C 100 70 200 50 310 40" stroke="orange" fill="transparent"
stroke-width="60" shape-rendering="crispEdges"/>
<text x="10" y="90">(crispEdges)</text>
</svg>
Hi, I was wondering how one would go about animating an svg arrow like above (on hover).
I have tried playing around with CSS transforms, but they also scale the arrow-head which is no good. I assume the correct way to do this is using SVGs animations, but I don't know where to start.
For example I would the following arrow (line only) to grow and arrow head to move accordingly.
<svg width="600px" height="100px">
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#f00" />
</marker>
</defs>
<line x1="50" y1="50" x2="100" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>
Any help is very much appreciated!
You can create growing arrow by using "respoinsive" SVG like this.
svg{
width: 20px;
height: 20px;
transition:width 2s ease;
overflow: visible;
}
svg:hover{
width: 100px;
}
<svg>
<defs>
<marker id="m" markerWidth="4" markerHeight="8"
refX="0" refY="1" viewBox="0 0 1 2">
<polygon points="0,0 1,1 0,2" fill="black"/>
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"
stroke-width="2" marker-end="url(#m)" stroke="black"/>
</svg>
There are some points to implement.
svg has no viewBox (so it is "responsive" SVG).
Line of arrow is defined by relative position of (root) svg size.
Arrow head is defined by marker element.
Growing animation is defined by CSS transition which animate width of svg. So, arrow grows with svg size.
In order to animate the individual SVG elements like HTML elements, you'll need to embed the SVG directly into the page like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
xml:space="preserve" class="logo">
<ellipse class="ground" cx="283.5" cy="487.5" rx="259" ry="80"/>
<path class="kiwi" d="M210.333,65.331C104.367,66.105-12.349,150.637,1.056,276.449c4.303,40.393,18.533,63.704,52.171,79.03
c36.307,16.544,57.022,54.556,50.406,112.954c-9.935,4.88-17.405,11.031-19.132,20.015c7.531-0.17,14.943-0.312,22.59,4.341
c20.333,12.375,31.296,27.363,42.979,51.72c1.714,3.572,8.192,2.849,8.312-3.078c0.17-8.467-1.856-17.454-5.226-26.933
c-2.955-8.313,3.059-7.985,6.917-6.106c6.399,3.115,16.334,9.43,30.39,13.098c5.392,1.407,5.995-3.877,5.224-6.991
c-1.864-7.522-11.009-10.862-24.519-19.229c-4.82-2.984-0.927-9.736,5.168-8.351l20.234,2.415c3.359,0.763,4.555-6.114,0.882-7.875
c-14.198-6.804-28.897-10.098-53.864-7.799c-11.617-29.265-29.811-61.617-15.674-81.681c12.639-17.938,31.216-20.74,39.147,43.489
c-5.002,3.107-11.215,5.031-11.332,13.024c7.201-2.845,11.207-1.399,14.791,0c17.912,6.998,35.462,21.826,52.982,37.309
c3.739,3.303,8.413-1.718,6.991-6.034c-2.138-6.494-8.053-10.659-14.791-20.016c-3.239-4.495,5.03-7.045,10.886-6.876
c13.849,0.396,22.886,8.268,35.177,11.218c4.483,1.076,9.741-1.964,6.917-6.917c-3.472-6.085-13.015-9.124-19.18-13.413
c-4.357-3.029-3.025-7.132,2.697-6.602c3.905,0.361,8.478,2.271,13.908,1.767c9.946-0.925,7.717-7.169-0.883-9.566
c-19.036-5.304-39.891-6.311-61.665-5.225c-43.837-8.358-31.554-84.887,0-90.363c29.571-5.132,62.966-13.339,99.928-32.156
c32.668-5.429,64.835-12.446,92.939-33.85c48.106-14.469,111.903,16.113,204.241,149.695c3.926,5.681,15.819,9.94,9.524-6.351
c-15.893-41.125-68.176-93.328-92.13-132.085c-24.581-39.774-14.34-61.243-39.957-91.247
c-21.326-24.978-47.502-25.803-77.339-17.365c-23.461,6.634-39.234-7.117-52.98-31.273C318.42,87.525,265.838,64.927,210.333,65.331
z M445.731,203.01c6.12,0,11.112,4.919,11.112,11.038c0,6.119-4.994,11.111-11.112,11.111s-11.038-4.994-11.038-11.111
C434.693,207.929,439.613,203.01,445.731,203.01z"/>
<filter id="pictureFilter" >
<feGaussianBlur stdDeviation="15" />
</filter>
</svg>
After doing this, you can use CSS animations on any of the individual SVG elements, just like HTML elements. For example, you could do the following:
svg ellipse { animate: grow 3s infinite; }
Without having the exact SVG code for your arrow, I can't give you more specific direction than that, but can point you in the direction of this article: https://css-tricks.com/using-svg/
How can I create a path with a fill and outline similar to
So far I have found a couple of ways but none that is particularly clean.
One way would be to use paint-order but this does not work in mobile and IE.
Another way duplicate the path... but this would create needless amounts of data.
Is there a different way to use CSS to simply create an outline or border for an SVG path?
<svg height="50" width="300">
<path d="M5 20 1215 20" />
</svg>
path {
fill: red;
stroke: #646464;
stroke-width:10px;
stroke-linejoin: round;
}
Here is a codepen
You have to draw the path as an outline as so:
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220">
<path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<path fill="#fff" stroke="#00b400" stroke-width="4"
d="M 159.8 30.3
h -110
v 120
h-20
l 30 40
30 -40
h-20
v-100
h90"/>
</svg>
Sketched in Inkscape, optimised in SVGOMG then tweaked by hand.
EDIT
I have a working solution using markers that works as follows:
Create the line (any line) as a symbol
Create a faux - stroke by layering two instances of the line on top of each other, with different line widths
Add arrow with pre-defined stroke as marker
Hairline stroke shows through sometimes at start of line ... solve this using another marker that masks using the background color.
this technique would only work over a plain background.
<svg style="display: inline-block; margin-left: 2em;" width="220" height="220" viewBox="0 0 220 220" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.arrow-stroke {
stroke: #00b400;
stroke-width: 28;
/* marker-end etc should be supported but unsure of browser support */
}
.arrow-fill {
stroke: white;
stroke-width: 20
}
</style>
<marker id="arrow" markerWidth="45" markerHeight="70" refX="5" refY="35" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#fff" stroke="#00b400" stroke-width="4" d="M 2 25 v-20 l 40,30 -40,30 v-20"/>
</marker>
<!-- Used to hide hairline that shows through, fill color must match background color -->
<marker id="startMask" markerWidth="2" markerHeight="30" refX="1" refY="15" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#ddd" d="M0 0 v30 h2 v-30 z" />
</marker>
<symbol id="line">
<path d="M 159.8 30.3 h -110 v 120"/>
</symbol>
<symbol id="line2">
<path d="M 140 60 l 20 30"/>
</symbol>
<symbol id="line3">
<path d="M 100 80 q 0 40 20 70"/>
</symbol>
</defs>
<path id="grey-box" fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<g fill="none">
<use xlink:href="#line" class="arrow-stroke" />
<use xlink:href="#line" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line2" class="arrow-stroke" />
<use xlink:href="#line2" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line3" class="arrow-stroke" />
<use xlink:href="#line3" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
</g>
</svg>
Hope this helps
On an element with a background (image or solid color don't really matter):
<header id="block-header"></header>
I am trying to apply a clip-path using SVG. To achieve this, I am putting SVG inline into the same element like this:
<header id="block-header">
…
<svg width="100%" height="100%" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
…
</header>
You can run the code snippet below or check the JSFiddle. You can see original SVG image (in black) put inline, having curviness along the bottom and being responsive. In contrast, the red rectangle shows the same image applied (or, rather, not applied) as a clip-path.
I guess I misunderstand either viewBox or preserveAspectRatio attributes though can not find what is exactly wrong here. Any help would be appreciated.
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none"><path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="100%" height="100" viewBox="0 0 4000 1696" preserveAspectRatio="none">
<defs>
<clipPath id="myClip">
<path d="M0 1568.18V0h4000v1568.18S3206.25 1696 2000 1696C984.37 1696 0 1568.18 0 1568.18z"/>
</clipPath>
</defs>
</svg>
</header>
References to SVG clip paths are to the clip path definitions themselves and the dimensions or other attributes of the <svg> are meaningless in this context.
What is happening in your example is that you are applying a 4000 px wide clip path to your header. Which is probably only of the order of 900 px wide. So the curvature isn't visible.
If you want a responsive clip path, you should define it using clipPathUnits="objectBoundingBox".
#block-header {
background: Red;
min-height: 100px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h1>SVG image</h1>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 1 1" preserveAspectRatio="none"><path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/></svg>
<h1><code>clip-path</code> using the same SVG</h1>
<header id="block-header">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
</clipPath>
</defs>
</svg>
</header>
Fiddle here