I need to create a set of 3 triangles that each have content in them (images, copy, etc).
I have setup this Pen to show roughly what I'm trying to achieve: https://codepen.io/andystent/pen/OJyNdmB
And here is an image for quick reference:
In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly.
The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong.
It should look like a mirrored version of the "Left" triangle.
When I apply it to an image it is perfect but when I apply to the div it is not. What is the best way to do this?
I am new to SVG so it is extremely likely that I am not doing this correctly. I have looked at numerous posts and the method I have tried is from a few of those but without success... so now I'm reaching out to you geniuses...
Here's the HTML and CSS for the red "Right" triangle with the clip applied to the DIV in the CSS:
#right-wrapper {
position: absolute;
width: 50%;
height: 100%;
right: 0;
padding: 40px 20px;
box-sizing: border-box;
}
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
display: flex;
justify-content: center;
align-items: center;
}
<div id="right-wrapper">
<svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
<!-- <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
</svg>
</div>
----- UPDATE: -----
As suggested in the comments, I have created a simplified Pen that gets to the heart of what I'm trying to achieve and the embedded HTML and CSS is below.
Essentially I am trying to get the red <div> to be clipped exactly like the <image>.
https://codepen.io/andystent/pen/RwWRjLd
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
}
<svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
</svg>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
Here is an idea where I will be using mask instead of clip-path. The main trick to correctly set the viewBox (you already have it in your code) add preserveAspectRatio="none" then have a mask size of 100% 100%
.box {
width:200px;
height:200px;
display:inline-block;
background:red;
}
.mask {
-webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">
The border property not getting applied on SVG text. I do not want to use the outline property as it does not have support to give different colour on different sides, neither do I want to use additional svg elements like rect or path as it would make my task more complicated as a whole. Please guide how can I apply border css on SVG text element.
<body>
<style>
#abc {
border: 1px solid green;
}
</style>
<svg height="100" width="200">
<text x="10" y="25" fill="red" id="abc">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
<body>
<style>
#abc {
border: 1px solid green;
}
</style>
<svg height="40" width="100" id="abc">
<text x="10" y="25" fill="red" >I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
<!DOCTYPE html>
<html>
<body>
<style>
.abc { height: 25px;
border: 1px solid green;
width: 88px;}
</style>
<svg class="abc">
<text x="5" y="18" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
I cannot figure out why the style doesn't apply to rectangle.
style
<style>
.bar {
width: 100;
height: 100;
fill: green;
}
</style>
svg
<body>
<svg width="100" height="100">
<rect class="bar"/>
</svg>
</body>
when I change according to joe_young's suggestions, it works in Chrome but not in Firefox:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
.bar {
width: 100px;
height: 100px;
fill: green;
}
</style>
</head>
<body>
<svg width="100" height="100">
<rect class="bar" />
</svg>
</body>
</html>
As for your problem, turns out that firefox doesn't like the SVG's styles in the <style> tags, you need to inline them:
<svg width="100" height="100">
<rect class="bar" width="100" height="100px" style="fill: green"/>
</svg>
You're trying to use an SVG element, <rect>, so it needs to go within the <svg> tags
Also, when using it with CSS (as you're doing here), your width and height values need a unit, here px
.bar {
width: 100px; /* You need to include the 'px' here'*/
height: 100px;
fill: green;
}
<svg width="100" height="100">
<rect class="bar" />
</svg>
It needs to be enclosed in an svg tag.
Reference for further reading.
Lately i have created an svg masked image that works perfectly in Chrome but done not work in My version of Internet explorer. Here is the End result expected from my svg
This is my svg code
<svg width="0" height="0" viewBox="0 0 160 160">
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
</svg>
<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
And this is my css
* {
padding: 0;
margin: 0;
}
.photo_rectangle_inverse {
height: 160px;
width: 170px;
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
Since the svg was not working in Internet Explorer (IE 11), after reading this article that talks about compatibility issue with Browsers, I added
<meta http-equiv="X-UA-Compatible" content="IE=edge">
To the top of my page because IE Edge based on the article seems to be the most compatible with Svg.
But still the svg shape is not displaying.
Here is a Jsfiddle . Note Jsfiddle does not allow meta tag
How to make an svg masked image compatible with Internet Explorer ?
Tks
IE won't apply an SVG clip to a html element, so you need an SVG <image> element rather than an HTML <img> element e.g.
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
.photo_rectangle_inverse {
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
<svg height="100%" width="100%" >
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
<image height="160px" width="170px" xlink:href='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse'/>
<image transform="translate(170,0)" height="160px" width="170px" xlink:href='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
</svg>'
I wanted to use scaled svg images as icons of different sizes, but found inconsistent behaviors in firefox.
Without css sprite, firefox would anti-alias the scaled images. But with css sprite, firefox would not anti-alias them. Therefore, The icons looked ugly with css sprite.
Please visit this jsfiddle for details. What's the problem with firefox?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.whole {
width: 80px;
height: 80px;
background-image: url("outliner.svg");
background-size: 100% 100%;
}
i {
width: 16px;
height: 16px;
display: inline-block;
background-image: url("outliner.svg");
background-size: 500% 500%;
}
.circle { background-position: -32px 0;}
.disk { background-position: 0 -16px; }
</style>
</head>
<body>
<div>With CSS Sprite:</div>
<i class="circle"></i><i class="disk"></i>
<div>Without CSS Sprite:</div>
<i class="whole"></i>
</body>
</html>
Currently, there is no CSS method to change the rendering mode of SVG elements, though there is an SVG attribute that can do so: shape-rendering.
I went ahead and ran your SVG file through a base64 encoder (which you can use to decode the data in the following examples), after adding shape-rendering: <value> to each of your <g> elements, where <value> has several options: optimizeSpeed (example), crispEdges (example), and geometricPrecision (example).
Depending on how you want your final SVG to display, just choose one of the particular values, and your final SVG code will look somewhat like the following (note the shape-rendering attribute on each of the <g> tags):
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="480" viewBox="0 0 480 480">
<g shape-rendering="crispEdges" stroke="#333" fill="#333">
<g shape-rendering="crispEdges" id="icon-1-1" transform="translate(0,0)">
<line x1="10" y1="10" x2="86" y2="86" stroke-width="12"/>
<line x1="10" y1="86" x2="86" y2="10" stroke-width="12"/>
</g>
<g shape-rendering="crispEdges" id="icon-1-2" transform="translate(96,0)">
<!-- svg continues below ... -->