Is there an (elegant) way to draw a path with "negative" stroke colour?
What I mean is if i have some element in an HTML document (e.g. a <canvas> or an <img>, and I overlay it with an <svg> element. And I want to draw a path in that <svg> element. I want the stroke colour to automatically be the negative of whatever is under that path. Of course, this means the colour of each pixel of the path changes as it passes over different parts of the <img> element underneath the <svg> element.
You can use mix-blend-mode:difference property to draw path by inverted colors of backward elements(img, canvas and so on), like this.
HTML
<div class="wrapper">
<img src="http://jsrun.it/assets/G/H/X/X/GHXXX.png">
<svg width="500px" height="500px">
<path d="M50,50l400,400" stroke-width="100" stroke="#fff"/>
</svg>
</div>
CSS
.wrapper{
position:relative;
}
.wrapper *{
position:absolute;
}
.wrapper path{
mix-blend-mode:difference;
}
http://jsdo.it/defghi1977/8JKE
Related
I’ve been strugglin on making a wavy line on the transition between two sections on my page. These two sections have their respective background images. What I’ve found are examples where at least one section have a simple colored background.
The problem is that when using some of the methods found (svg, clip-path, transform), I have to always fill with a color.
What I want: https://imgur.com/R1sXk8y
What I have done so far: https://imgur.com/CtVLOE8 (This one is a sloped line example. I have to do various shapes on different borders, but its an example to show the separation that would be noticed with the wavy border too)
This is my solution: I'm using clip-path as you intended, although, as you may know, clip-path is not supported in all browsers.
The main idea is having clipPathUnits="objectBoundingBox".
MDN quote:
This value [clipPathUnits="objectBoundingBox"] indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.
*{margin:0;padding:0;}
#top {
padding: 0;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/castell.jpg);
background-size: cover;
height: 50vh;
-webkit-clip-path: url(#clip);
clip-path: url(#clip);
}
body{background:url(https://images.unsplash.com/photo-1470327500070-4857199b1bcd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);background-size:cover}
<svg height="0" width="0" class="svg-clip" style="position:absolute">
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M0,0 L0,.5 Q.3,.2 .5,.5 T1,.5L1,0 0,0" />
</clipPath>
</defs>
</svg>
<div id="top"></div>
hey i have some Svg elements consisting each out of a polygon shape. see the following code:
<body>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id ="p1" points="500,0 1920,0 1920,200 600,200"/>
</svg>
<svg class="svgRules" width = "100%" height="200">
<polygon class="opmaakPoly" id="p2" points="600,0 1920,0 1920,200 700,200"/>
</svg>
</body>
with the following style:
body{
margin: 0;
padding: 0;
}
.svgRules{
float: left;
}
.opmaakPoly{
stroke:#F0c;
fill: #FFF;
stroke-width:2px;
}
now when i scale the browser window the polygon shapes dont scale accordingly i tried setting the points to percentages but that didnt seem to work. so how do i make the polygon element scale with the browser window?
JSFiddle
Try to add
viewBox="0 0 1920 1080" preserveAspectRatio="none"
or similar to your svg tag - the viewbox should have the your desired (svg-internal) size, while preserveAspectRatio will allow it to scale properly - check the available values if "none" doesn't create the desired result.
oke thanks to rainforce15 and maxshuty i figured out how to do it properly!
you indeed need to add the:
viewBox="0,0,1920,1080" preserveAspectRation="none"
but you need to make the viewBox the size of the polygon shape inside otherwise it will deform the polygon shape.
so instead of using:
viewBox="0,0,1920,1080"
use
viewBox="0,0,1920,200"
I have a CSS property of fill applied on SVG. But that SVG is inside the anchor tag which has a property of color. Everything looks fine in Chrome but when i open the page in Firefox the SVG is taking the color property of the anchor tag to fill the SVG. Can anyone explain why is this happening?
<a>
<svg class="icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="icons.svg#icon-tag"></use>
</svg> Special Offers
</a>
a{
color:#somecolor;
}
svg{
fill:#somecolor;
}
PS: fill is not getting overridden by color property. And i am fetching the svg from svg sprites file.
I have created an ellipse in SVG with a stroke-width and stroke but the top and left sides of the stroke are truncated. They appear to be overflowing outside of the containing svg tag. I tried using overflow:visible; property on the SVG but it still doesn't work.
Following is my HTML:
<div id="div1">
<svg id="svg1">
<ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114"></ellipse>
</svg>
</div>
And this is its CSS:
#div1 {
padding:10px;
margin:10px;
}
#svg1 {
overflow:visible;
margin-left:86.4305555339479;
margin-top:-4.409722221119791;
}
#oval1 {
fill:hsl(50.7692307692305,27.6595744680847%,68.0882352941177%);
stroke-width:5.291666665343749;
stroke:hsl(79.5918367346938,41.8803418803418%,40.5882352941176%);
}
You can see the running code here as well.
I have had a similar problem with rectangles in the past and they got fixed after using overflow:visible; for the containing svg. But it doesn't seems to be working for ellipses now.
Can anyone help me fix the issue?
Thnx in advance!
UPDATE: Looks like there are active bug for this behaviour in at least Chrome (https://code.google.com/p/chromium/issues/detail?id=231577) and has been for Firefox as well (https://bugzilla.mozilla.org/show_bug.cgi?id=378923). So depending on version you might be out of luck. As of writing this is not fixed in Chrome (32.0.1700.6 beta) and there is a fiddle you can use to test with here: http://jsfiddle.net/HRsvX/36/ all three triangles should be fully visible if the browser implements the current SVG 1.1 spec. Fiddle reproduced below.
The circle inner area is bordering the SVG element. Before HTML5t the SVG element itself is like an image or flash movie, it can't overflow into the html document, it has it's own canvas so to speak. When you add stroke (that by default is outside the area you defined) the stroke will end up outside the SVG canvas. You'll have to account for that in the centering of the circle:
The center has to be the radius+stroke width so your center x for example would have to be 164.041666625656 + 5.291666665343749 minimum to fully fit inside the SVG.
If you specify the HTML5 doctype and use an inline SVG as in your example it should show the overflowing content since the default value for overflow is visible and HTML5 allows for overflow on inline SVG elements.
So either check your doctype or reposition the center to account for the stroke width.
More on the overflow of SVG elements can be found in Mozilla developer documents and a nice piece on this MSDN blog that explains the default overflow.
HTML
<div><svg height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
<div><svg id="clip1" height="100" width="100" viewbox="00 0 100 100">
<path d="M210 10 L90 10 L90 90 " fill="red"/>
</svg></div>
CSS
div {
height:100px; width:100px;
margin:1em auto;
border: solid 1px black;
}
svg { overflow:visible }
#clip1 {clip: rect(-10px,-10px,-10px,-10px)} //nope
#clip2 {clip: auto} //nope
Add a viewBox that describes the content of the SVG. The browser will then ensure that the entire ellipse and its stroke are visible. If you want it renderered at 1:1, you will also need to add an equivalent width and height.
<svg id="svg1" width="335" height="199" viewBox="-3 -3 335 199">
<ellipse id="oval1" cx="164.041666625656" cy="96.1319444204114" rx="164.041666625656" ry="96.1319444204114" />
</svg>
Demo here
This is a part of my HTML I have embedded the SVG element.
<div>
<embed id="svgsource" type="image/svg+xml" src="/CXF/2012-01-27---11-35-47/6.svg">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="900px" height="751px" onload="init()" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>
</embed>
</div>
But when you go to this page, you notice a visible line on top of the SVG element, as if it has set a top border:
is there any way to get rid of that?
Why do you have an inline <svg> element inside the <embed>? Have you tried removing that part?
Maybe the svg you reference has a rectangle to serve as a border? In that case you'll need to change the "/CXF/2012-01-27---11-35-47/6.svg" file itself.