SVG Clipping

Developer
Томаш Хамлай
Size
2,784 Kb
Views
16,192
  1. SVG Clipping Previews
  2. SVG Clipping HTML Codes
  3. SVG Clipping CSS Codes

How do I make an svg clipping?

What is a svg clipping? How do you make a svg clipping? This script and codes were developed by Томаш Хамлай on 11 November 2022, Friday.

SVG Clipping Previews
IQ Test

SVG Clipping - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Clipping</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="svg-defs"> <defs> <clipPath id="clipping" clipPathUnits="objectBoundingBox"> <path class="clip-path" d="M0.8908045977011494 0.005747126436781609 A 0.10344827586206896 0.10344827586206896, 0, 0, 0, 0.9942528735632183 0.10919540229885058 L 0.9942528735632183 0.8908045977011494 A 0.10344827586206896 0.10344827586206896, 0, 0, 0, 0.8908045977011494 0.9942528735632183 L 0.10919540229885058 0.9942528735632183 A 0.10344827586206896 0.10344827586206896, 0, 0, 0, 0.005747126436781609 0.8908045977011494 L 0.005747126436781609 0.10919540229885058 A 0.10344827586206896 0.10344827586206896, 0, 0, 0, 0.10919540229885058 0.005747126436781609 Z " /> </clipPath> </defs>
</svg>
<div class="background"> <div class="element-wrapper"> <svg class="worker-bg" viewBox="0 0 174 174" preserveAspectRatio="xMaxYMax meet" xmlns="http://www.w3.org/2000/svg"> <path class="bg-path-z0" d="M154 2 A 18 18, 0, 0, 0, 172 20 L 172 154 A 18 18, 0, 0, 0, 154 172 L 20 172 A 18 18, 0, 0, 0, 2 154 L 2 20 A 18 18, 0, 0, 0, 20 2 Z" /> <path class="bg-path-z1" d="M154 1 A 18 18, 0, 0, 0, 172 20 L 172 154 A 18 18, 0, 0, 0, 154 172 L 20 172 A 18 18, 0, 0, 0, 2 154 L 2 20 A 18 18, 0, 0, 0, 20 2 Z" /> <path class="bg-path-z2" d="M151 5 A 20 20, 0, 0, 0, 169 23 L 169 151 A 20 20, 0, 0, 0, 151 169 L 23 169 A 20 20, 0, 0, 0, 5 151 L 5 23 A 20 20, 0, 0, 0, 23 5 Z" /> </svg> <div class="element"> <svg class="svg-image-with-vector-mask" viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax meet"> <image width="100%" height="100%" xlink:href="https://fleetstreet186.com.ua/wp-content/themes/your-clean-template-3/img/worker2.jpeg" /> </svg> </div> </div>
</div>
</body>
</html>

SVG Clipping - Script Codes CSS Codes

* { margin: 0;
}
html,
body { height: 100%;
}
.background { height: 100%; width: 100%; position: relative; background-color: #093b4d;
}
.element-wrapper { position: absolute; top: 30%; right: 30%; bottom: 30%; left: 30%; margin: auto;
}
.worker-bg { position: relative; top: 9px; left: 9px;
}
.element { position: absolute; top: -7px; left: -7px; width: 100%; height: auto;
}
.svg-defs { position: absolute; z-index: -1;
}
.bg-path-z0,
.bg-path-z1,
.bg-path-z2 { fill: transparent; fill-opacity: 0; stroke-opacity: 0.2; stroke: #ffe9cd;
}
.bg-path-z0 { stroke-width: 3px;
}
.bg-path-z1 { stroke-width: 2px;
}
.bg-path-z2 { stroke-width: 1px;
}
.clip-path { stroke: transparent; stroke-opacity: 0; stroke-width: 1;
}
.svg-image-with-vector-mask { clip-path: url(#clipping);
}
SVG Clipping - Script Codes
SVG Clipping - Script Codes
Home Page Home
Developer Томаш Хамлай
Username TomashKhamlai
Uploaded November 11, 2022
Rating 3
Size 2,784 Kb
Views 16,192
Do you need developer help for SVG Clipping?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Томаш Хамлай (TomashKhamlai) Script Codes
Name
Calc2
Nesting countersEdit
Firefox SVG Example
SVG-button
Jplayer
Calc.js
Teplomer.in.ua calculator
Calculator
SVG-button Responsive
SVG Mascing Stretching AR
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!