Skip to content

Fix text clipping itself by inheriting the clip-path and tranforming it#66

Merged
gentledepp merged 1 commit intodevelopfrom
fix/13227_text_clips_itself
Apr 24, 2026
Merged

Fix text clipping itself by inheriting the clip-path and tranforming it#66
gentledepp merged 1 commit intodevelopfrom
fix/13227_text_clips_itself

Conversation

@dariostrm
Copy link
Copy Markdown
Collaborator

  • According to w3.org, the clip-path property is not inherited and clip-rule is
  • The SVG.NET library also corrected that a few years ago
  • What was happening is that the text element would inherit the clip-path from its parent, and if the text had a transform, the clip-path would effectively be transformed as well, causing the text to clip itself.
  • For example, if there was a clip-path going from y=-51 with height=50, and the text had a transform="translate(0, 20)":
    • The text would be rendered beginning from y=20 upwards,
    • The clip path would be transformed to y=-31 with height=50 hiding everything outside y=-31 to y=19, so you could see the whole text except for the small part at the bottom
    • The expected behavior for these values would be that the text is not visible at all because the clip-path should have hidden everything outside y=-51 to y=-1
  • I also needed to call SetClip before and ResetClip after calling RenderChildren so that the group element would actually apply the clip-path. This wasn't the case before
  • Also wrote some unit tests

Before

13227_before.mp4

After

13227_after.mp4

- According to [w3.org](https://www.w3.org/TR/SVG11/propidx.html), the clip-path property is not inherited and clip-rule is
- The [SVG.NET library](svg-net#541) also corrected that a few years ago
- What was happening is that the text element would inherit the clip-path from its parent, and if the text had a transform, the clip-path
would effectively be transformed as well, causing the text to clip itself.
- For example, if there was a clip-path going from y=-51 with height=50, and the text had a transform="translate(0, 20)":
   - The text would be rendered beginning from y=20 upwards,
   - The clip path would be transformed to y=-31 with height=50 hiding everything outside y=-31 to y=19, so you could see the whole text except for the small part at the bottom
   - The expected behavior for these values would be that the text is not visible at all because the clip-path should have hidden everything outside y=-51 to y=-1
- I also needed to call `SetClip` before and `ResetClip` after calling `RenderChildren` so that the group element would actually apply the clip-path. This wasn't the case before
- Also wrote some unit tests
@dariostrm
Copy link
Copy Markdown
Collaborator Author

@gentledepp Should I also increment the version number in Svg.Editor etc.?

public override object ConvertFromString(string value, Type targetType, SvgDocument document)
{
if (value == "none")
return SvgFontVariant.Normal;
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A change unrelated to the bug.
When testing something I got hundreds of exceptions when the font was set to none in an svg

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only necessary if you changed something in the editor

@gentledepp gentledepp merged commit cc41601 into develop Apr 24, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants