I’m trying to add an SVG to an SVG and clip it. In this example the external SVG is named box.svg and is embedded using an image tag.
When the clip-path attribute is present, the box disappears. When removed, the box shows up. After toying with viewBox and clipPathUnits and even xmlns I still can’t find a solution.
box.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="32" height="32">
<rect x="0" y="0" width="100" height="100" fill="blue"></rect>
</svg>
test.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg width="200" height="200" viewbox="0 0 200 200">
<defs>
<clip-path id="cliparea">
<polygon points="95 43 104 43 151 123 146 132 53 132 48 123"></polygon>
</clip-path>
</defs>
<polygon stroke="#0F0" points="95 43 104 43 151 123 146 132 53 132 48 123" id="poly-gitea"></polygon>
<image x="60" y="60" width="80" height="80" clip-path="url(#cliparea)" href="/box.svg">
</image></svg>
</body>
</html>
The element is clipPath not clip-path. Using clip-path for the attribute name is correct though.
Ugh. So simple! Thanks for pointing out my mistake.