We have an issue with applying a clipPath to a text element in the svg below.
<!DOCTYPE html>
<html>
<head>
<title>Svg clipping issue</title>
</head>
<body>
<div style="width:500px;height:180px;">
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"
width="100%">
<defs>
<clipPath id="myClip">
<rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>
</clipPath>
</defs>
<polygon points="198.1017,98.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383" clip-path="url(#myClip)"
fill="#FF0000" stroke-width="none"></polygon>
<text transform="matrix(1,-0,-0,1,-0,-25.7478256)" clip-path="url(#myClip)" font-family="Microsoft Sans Serif"
font-size="8.25pt" fill="#000000">
<tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>
<tspan text-anchor="middle" x="230.6017" y="121.205841">A very very long line</tspan>
</text>
<rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>
</svg>
</div>
</body>
</html>The clipPath is applied to the polygon and to the text element. On the polygon the clipPath is working correctly, as we still see the polygon.
On the text it has the issue that the entire text is clipped, but is should look like this.
If we remove the clipPath from the text element we obviously can we see the entire text, but this is not what we want.
Anybody an idea what's going on or is this a rendering bug in the browser? We get the same result on Firefox, Chrome, Edge, IE.
The problem you are having is because any transform that is applied to an element, also gets applied to the clip path attached to it. So your clip path gets transformed twice by the
transform="matrix(1,-0,-0,1,-0,-25.7478256)"
that is on the <text> element and also on the <clipPath> element.
You can fix this in several ways:
transform from the <text> element and change it's coordinates so it is correctly over the rectangle. Or do the reverse to the rectangle.<clipPath> without the transform. See example below<!DOCTYPE html>
<html>
<head>
<title>Svg clipping issue</title>
</head>
<body>
<div style="width:500px;height:180px;">
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="100%"
width="100%">
<defs>
<clipPath id="myClip">
<rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198.1017" y="98.565216" width="65" height="25"></rect>
</clipPath>
<clipPath id="myClip2">
<rect x="198.1017" y="98.565216" width="65" height="25"></rect>
</clipPath>
</defs>
<polygon points="198.1017,98.565216 263.84082,98.565216 263.84082,72.817383 198.1017,72.817383" clip-path="url(#myClip)"
fill="#FF0000" stroke-width="none"></polygon>
<text transform="matrix(1,-0,-0,1,-0,-25.7478256)" clip-path="url(#myClip2)" font-family="Microsoft Sans Serif"
font-size="8.25pt" fill="#000000">
<tspan text-anchor="middle" x="230.6017" y="108.755646">Line 1</tspan>
<tspan text-anchor="middle" x="230.6017" y="121.205841">A very very long line</tspan>
</text>
<rect transform="matrix(1,-0,-0,1,-0,-25.7478256)" x="198" y="98" width="65" height="25" fill="none" stroke="#0000FF"></rect>
</svg>
</div>
</body>
</html>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments