Does ID2D1SvgDocument not support the opacity of svg resource?

Question

I use d2d to draw a svg resource, but the actual effect looks very strange.

the origin svg resource:
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 64 64" viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" style="fill:#e81c27"/><path d="m21.58 19.38-2.74-8.44-2.74 8.44H7.23l7.17 5.21-2.74 8.44 7.18-5.22 7.17 5.22-2.74-8.44 7.18-5.21zm12.87-7.01 1.52 2.54.26-2.95 2.88-.66-2.72-1.16.26-2.94-1.94 2.23-2.72-1.16 1.52 2.54-1.94 2.23zm7.63 7.79.42 2.93 1.38-2.61 2.91.5-2.05-2.12 1.38-2.61-2.66 1.3-2.05-2.12.41 2.92-2.65 1.31zm2.61 11.56 2.33-1.83-2.95.11-1.02-2.78-.81 2.84-2.96.11 2.46 1.65-.82 2.84 2.33-1.82 2.46 1.65zm-8.33 6.85.13-2.95-1.84 2.31-2.77-1.05 1.63 2.48-1.85 2.3 2.85-.78 1.62 2.47.14-2.95 2.85-.78z" style="fill:#ffe000"/><linearGradient id="a" x1="32" x2="32" y1="62" y2="2" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#1a1a1a"/><stop offset=".102" style="stop-color:#393939;stop-opacity:.949"/><stop offset=".347" style="stop-color:#7f7f7f;stop-opacity:.8262"/><stop offset=".569" style="stop-color:#b6b6b6;stop-opacity:.7156"/><stop offset=".758" style="stop-color:#dedede;stop-opacity:.6209"/><stop offset=".908" style="stop-color:#f6f6f6;stop-opacity:.5459"/><stop offset="1" style="stop-color:#fff;stop-opacity:.5"/></linearGradient><circle cx="32" cy="32" r="30" style="opacity:.1;fill:url(#a)"/></svg>

bug the actual effect which drawn by d2d:

Is it a problem with ID2D1SvgDocument not correctly applying SVG transparency?

how to fix it?

Answer 1

Thanks for reaching out.

ID2D1SvgDocument does support the opacity attribute, but there are some limitations in Direct2D’s SVG implementation that cause the rendering to differ from full SVG engines.

Why this happens

• Direct2D does not fully support stop-opacity in gradient stops. It only respects opacity at the element level.
• Complex blending and CSS-based transparency are not fully implemented in Direct2D.

How to fix

1. Flatten opacity into RGBA colors: Modify your SVG so gradient stops include alpha in the color instead of using stop-opacity.\ Example: <stop offset="0" style="stop-color:rgba(26,26,26,255)"/>
2. Apply opacity programmatically: Use Direct2D APIs to set opacity: svgDocument->SetAttributeValue(L"opacity", D2D1SVGATTRIBUTEPODTYPE_FLOAT, &opacityValue);
3. Per-element control:
   Retrieve the element and set opacity explicitly: ComPtr<ID2D1SvgElement> circleElement; svgDocument->GetElementById(L"circleId", &circleElement); circleElement->SetAttributeValue(L"opacity", D2D1SVGATTRIBUTEPODTYPE_FLOAT, &opacityValue);

   References

• Direct2D SVG Overview
• ID2D1SvgDocument Interface

Let me know if the issue persists after following these steps. I’ll be happy to assist further if needed. If the issue has been resolved, Kindly mark the provided solution as "Accept Answer", so that others in the community facing similar issues can easily find the solution. Your contribution is highly appreciated.

---