Support CSS mix-blend-mode rendering#515
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a18abfef0b
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| element.IsContainerElement() && | ||
| TryParseIsolation(element)) |
There was a problem hiding this comment.
When isolation:isolate is styled on a <use> element, this guard drops it because SvgUse is not included in IsContainerElement(), even though TryCompileDirectUseNode expands the referenced content as children of the use scene node. In that case any referenced child using mix-blend-mode still blends against the external backdrop instead of the isolated <use> group; remove or broaden this container check so scene nodes that actually contain generated children can form isolation layers.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f5a9e6c5ec
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| var enableOpacity = !ignoreAttributes.HasFlag(DrawAttributes.Opacity) && !ignoreCurrentOpacity; | ||
| var enableFilter = !ignoreAttributes.HasFlag(DrawAttributes.Filter) && !ignoreCurrentFilter; | ||
| if (IsStateFreeNode(node, enableTransform, enableClip, enableMask, enableOpacity, enableFilter)) | ||
| var enableBlendMode = node.BlendModePaint is not null; |
There was a problem hiding this comment.
When a node has both filter and mix-blend-mode, SvgSceneFilterSource.SourceGraphic() renders the target with ignoreRootFilter: true to build the filter input, but this new unconditional check still enables the blend layer. That means the filter's SourceGraphic is no longer the element's pre-compositing pixels; it is first composited with the temporary transparent filter canvas, so e.g. filter="url(#blur)" plus style="mix-blend-mode:multiply" can feed the blur an already-blended/transparent result instead of the original graphic. The blend should be skipped when rendering filter sources, similar to the existing root opacity/mask/filter ignores.
Useful? React with 👍 / 👎.
This reverts commit 8ff31a1.
1 participant
PR Summary: Support CSS
mix-blend-modeSummary
This PR adds a focused compatibility implementation for issue #310, where SVG content that uses CSS
mix-blend-moderendered without blend behavior in Svg.Skia. The implementation keeps the scope limited to CSS style declarations and does not treatmix-blend-modeorisolationas SVG presentation/XML attributes.Changes
mix-blend-modeandisolationdeclarations from inline styles and stylesheets in custom attributes so retained scene compilation can inspect them after style resolution.mix-blend-modekeywords toSKBlendModevalues:multiplyscreenoverlaydarkenlightencolor-dodgecolor-burnhard-lightsoft-lightdifferenceexclusionhuesaturationcolorluminositySaveLayerpaint state.isolation:isolatefor container nodes by rendering isolated groups through an intermediate layer.mix-blend-mode="overlay"andisolation="isolate"ignored, matching browser behavior for the relevant resvg SVG2 fixtures.Tests And References
mix-blend-modeon an image nodemix-blend-modeon a shape nodemix-blend-modeisolation:isolateon a container nodea-isolation-001a-isolation-002a-mix-blend-mode-001througha-mix-blend-mode-020Validation
git diff --checkdotnet test tests/Svg.Skia.UnitTests/Svg.Skia.UnitTests.csproj -f net10.0 -c Release --no-restore --filter "FullyQualifiedName~SvgRetainedSceneGraphTests"dotnet test tests/Svg.Skia.UnitTests/Svg.Skia.UnitTests.csproj -f net10.0 -c Release --no-restore --filter "FullyQualifiedName~resvgTests.a_mix_blend_mode|FullyQualifiedName~resvgTests.a_isolation"dotnet build Svg.Skia.slnx -c Releasedotnet test Svg.Skia.slnx -c Releasedotnet format Svg.Skia.slnx --no-restorewas attempted before committing, but it stalled after workspace-load warnings and had to be stopped. No solution-format process remains running.