I'm trying to make an SVG line with a little triangle in one end of it, using markers. This code, however, doesn't work. The marker doesn't show up. It's the first time I'm experimenting with svg, but the code doesn't seem to have any mistake... Is something wrong with it? Thanks in advance.
<svg id="rep-svg-13" class="rep-svg" style="position: absolute; left: -82px; top: -269px; display: block; opacity: 1;" width="35.6534886317" height="87.101405277" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<marker id="myMarker-13" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<polygon points="0,0 10,5 0,10" style="fill:rgb(100, 100, 100);"></polygon>
</marker>
</defs>
<line id="rep-arrow-13" x1="5.20716619357648" y1="-10.545316845143645" x2="30.44632243812352" y2="97.64672212214364" stroke="#ff0000" stroke-width="7" marker-end="url(#myMarker-13)"></line>
</svg>
Your line and arrow are there. They just aren't visible. Your position coordinates are drawing it off the screen:
left: -82px; top: -269px;
See this JSFiddle.
I replace the left and top values with positive values, changed the SVG's size and added a border to expose its the limits, and now you can see the arrow.
Related
I'm trying to create an effect on an svg path with vector="non-scaling-stroke" with a drop shadow using filter: drop-shadow(...).
However, when the path is scaled to fit the screen (having this scaling is necessary) the path remains a a consistent size but the drop shadow stretches:
svg {
width: 1000px; /*just to simulate problem, these would be vw & vh units in practice*/
height: 200px;
}
path {
filter: drop-shadow(0px 0px 1px blue);
}
<svg preserveAspectRatio="none" viewBox="0 0 100 100">
<path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
</svg>
As you can see, the shadow is closely fitted around the horizontal section of the line but more spread on the vertical section. This is expected really but I'm wondering if there's any trick I'm missing to have the shadow be a consistent size around the line for the entire path.
As well as using css filter I've tried:
using svg filters drop shadow on the path.
placing a dummy path behind the line with a gaussian blur to simulate a shadow.
Both produce the same result.
I also understand I can resize the svg viewBox to fit the screen with js to avoid the scaling issues altogether but this is really a last resort if there are no other solutions.
Thanks!
I think, that this could work!
svg {
width: 1000px;
/*just to simulate problem, these would be vw & vh units in practice*/
height: 200px;
}
<svg preserveAspectRatio="none" viewBox="0 0 100 100">
<path fill="none" stroke="black" stroke-width="5" vector-effect="non-scaling-stroke" d="M0,30 h50 v70"></path>
<rect x="0" y="29" width="50" height="2" style="fill:blue;filter: blur(2px);" />
<rect x="49.8" y="29" width=".5" height="70" style="fill:blue;filter: blur(.5px);" />
</svg>
Is there any way to decrease svg path thickness? I have following icon in svg format but this icon is made by single path. Adjusting atrributes "fill" or "stroke-width" not working.
What I am trying to do is reduce thickness of visible border by half.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
Is there any online editor which can do that? Or maybe there is some css tricks that I don't know?
Path thickness is negligible. Your path is not defining the lines you see, it is defining the border of those lines explicitly. You can see what the path describes by adding stroke="red". You can't decrease the thickness of the filled-in polygons by fiddling with the attributes alone. The only thing you can do without completely redoing the path is to use the background-colour stroke to erase part of the filled-in portion, though I'd argue it can't look as good as a hand-crafted icon:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
<g>
<path stroke-width="1" stroke="white" d="M24,14.059V5.584L18.414,0H0v32h24v-0.059c4.499-0.5,7.998-4.309,8-8.941C31.998,18.366,28.499,14.556,24,14.059z M17.998,2.413L21.586,6h-3.588V2.413z M2,30V1.998h14v6.001h6v6.06c-1.752,0.194-3.352,0.89-4.652,1.941H4v2h11.517 c-0.412,0.616-0.743,1.289-0.994,2H4v2h10.059C14.022,22.329,14,22.661,14,23c0,2.829,1.308,5.351,3.349,7H2z M23,29.883 c-3.801-0.009-6.876-3.084-6.885-6.883c0.009-3.801,3.084-6.876,6.885-6.885c3.799,0.009,6.874,3.084,6.883,6.885 C29.874,26.799,26.799,29.874,23,29.883z M20,12H4v2h16V12z" style="/* transform: scale(0.5, 0.5); *//* stroke: black; */"/>
<g>
<polygon stroke-width="1" stroke="white" points="28,22 24.002,22 24.002,18 22,18 22,22 18,22 18,24 22,24 22,28 24.002,28 24.002,24 28,24 "/>
</g>
</g>
</svg>
I am having some issues using an SVG clip-path. I can't work out how to make the path align with the image I am clipping - it is always way off. This is my markup:
HTML
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath">
<path d="M124.8,656.7H142V501.9c65.5-27.5,53.6,10.8,129,4.7v150.1h17.2v20.7H124.8V656.7z"/>
</clipPath>
</defs>
</svg>
SCSS
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
And a Codepen here:
https://codepen.io/mikehdesign/pen/yoOZYo
If you scroll down you will see the SVG outline I am using. Ideally I would like it to be centered on the image, though top left would be fine too. As it is I can't work out what the logic is behind the positioning.
Thanks!
Mike
When applying clip paths to HTML elements, it is highly recommended that you use the objectBoundingBox coordinate space rather than the default user space coordinates (userSpaceOnUse).
In objectBoundingBox units, the coordinates map directly to the object the clip is being applied to. So (0,0) means the top-left of the object, and (1,1) maps to the bottom-right of the object.
So if you stick to coordinates in that range, your clipping path is guaranteed to fall directly over your image.
Here's a demo with a simple diamond clip path. I'll you to do the conversion of your shape to objectBoundingBox coordinates.
.svg-clipped {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
<img class="svg-clipped" src="https://unsplash.it/1200/1200" alt="">
<svg height="0" width="0">
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M 0.5,0 L 1,0.5 0.5,1, 0,0.5 Z"/>
</clipPath>
</defs>
</svg>
I am trying to display these social media icons on my website in such a way that I can change the color using css (so i can add the hover effect shown in the code below).
However, since these are vector image files (.svg) I couldn't seem to find a way to insert the image into my web page using the conventional <img src=""> method. So I proceeded to create CSS classes to get the image to appear as a CSS mask (thus allowing me to change the color via CSS).
However, I quickly noticed that the sides of the otherwise circular vector graphic icons were slightly cutoff. Being the perfectionist that I am, I wanted to make the icons actually appear round as they were supposed to. So, after checking out the webkit-mask MSDN entry I increased the width of the .media-buttons class and used -webkit-mask-position to shift the image a few pixels down and to the left as is evident in my code below. This obviously did not work.
It has also come to my attention that -webkit-mask is not fully supported by all browsers.
CSS:
#cross{-webkit-mask: url("http://path/to/image.svg") no-repeat;}
.media-buttons {
width: 202px;
height: 202px;
background: #000;
-webkit-mask-position: 10px 10px;
}
.media-buttons:hover {background: rgb(94, 176, 201);}
HTML:
<img class="media-buttons" id="cross">
TL;DR, I am looking for a (possibly new) way to display my .svg icons that has somewhat decent browser support and the ability to manipulate the icon's color via CSS.
Here's one way:
svg:hover {
color: #009BCD;
}
p {
color: green;
}
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" display="none">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" fill="currentColor" sketch:type="MSShapeGroup"></path>
</g>
</svg>
<p>
Heh! What's this
<svg width="1em" height="1em" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
doing in the middle of a sentence?
</p>
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
What I did here was:
Copy the SVG into the HTML (and removed the XML preamble)
Set display="none" on the <svg> so that it is invisible on the page.
Changed the fill on the icons <path> element to currentColor
Now every time you want a copy of the icon to appear, create a mini-svg that reverences the <path> in the first SVG.
<svg width="50px" height="50px" viewBox="0 0 200 200">
<use xlink:href="#Cross"/>
</svg>
Just set it's size with the width and height values. You just need to include each icon once and you can reference them as many times as you like.
What is currentColor for?
currentColor is a special color value in SVGs that tells the elements to use the value of the current color setting. It means you can set the color outside the <use> element and it gets inherited by whatever the <use> is referencing. Normally you can't style each of the icon references individually. They would all be stuck having whatever fill the original <path> is set to.
Using just the original SVG
svg path {
fill: blue;
}
svg:hover path {
fill: #009BCD;
}
<p>SVG just used as is</p>
<svg width="100px" height="100px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>Cross</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
<path d="M100,0 C44.771524,3.03201907e-14 0,44.771524 0,100 C0,155.228476 44.771524,200 100,200 C155.228476,200 200,155.228476 200,100 C200,44.771524 155.228476,-3.41060513e-14 100,0 Z M84.0763011,40 L115.923699,40 L115.923699,84.1405714 L160,84.1405714 L160,116.034408 L115.923699,116.034408 L115.923699,160.16875 L84.0763011,160.16875 L84.0763011,116.034408 L40,116.034408 L40,84.1405714 L84.0763011,84.1405714 L84.0763011,40 Z" id="Cross" sketch:type="MSShapeGroup"></path>
</g>
</svg>
I can't tell for sure where this bug is coming from but I think it has something to do with borders. Add a 1px border and you'll see some really weird behaviour. Now to answer your question: To make sure your image doesn't get clipped you can use mask-size. E.g. -webkit-mask-size: 50% 50%;
Just don't think masks are ready for primetime just yet.
Here's a pen that demonstrates this: http://codepen.io/anon/pen/ONLRbZ
I've created an svg and an ellipse inside it using the code
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
type="svgObj"
style="display: inline; position: relative; left: 0px; top: 0px;"
id="svg_5"
preserveAspectRatio="none">
<ellipse type="svgShpObj" id="shape_2" cx="59px" cy="33px" rx="57px" ry="31px"
fill="#A5A85A" stroke-width="10" stroke="#F5821F"
stroke-opacity="1" fill-opacity="0.39215686274509803"/>
</svg>
paste it to http://www.w3schools.com/svg/tryit.asp?filename=trysvg_myfirst and check the problem that it clips left and top sides of the ellipse. How to fix this?
The "clipped" parts of the SVG are simply outside of the viewport.
There are several ways to "fix" this.
You can reposition the ellipse (MDN docu here and here) by changing the respective coordinates to
cx="70px" cy="40px"
Or you can explicitly set a viewBox (MDN docu), that includes the whole ellipse, by adding, e.g.,
viewBox="-10 -10 300 300"
to the <svg> element itself.