Right handling of SVG viewBox attribute

Skip to first unread message

Данил Буланов

Feb 28, 2024, 12:04:28 PMFeb 28
to skia-discuss
I have an SVG with the following code:

<svg width="100px" height="100px" viewBox="-5 -5 20 20" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" />
  <circle cx="50%" cy="50%" r="4" fill="white" />

And I have this code which renders this SVG:

auto s = "<svg width=\"100px\" height=\"100px\" viewBox=\"-5 -5 20 20\" "
"xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0\" y=\"0\" width=\"100%\" "
"height=\"100%\" /><circle cx=\"50%\" cy=\"50%\" r=\"4\" fill=\"white\" /></svg>";

auto data = SkData::MakeWithCopy(s, strlen(s));

auto stream = SkMemoryStream::Make(data);

fDom = SkSVGDOM::Builder().make(*stream);

And here is the result:


At the same time here is the result of rendering this SVG in chrome:

I have intentionally highlighted background of SVG dom element, as you can see it is clipped by it's width and height in this case, which does not happen in case of skia svg rendering.

So my question is the following, how to properly handle this case? The only option I am aware about is clipping rectangle of svg during rendering using canvas.clipRect() method, which does not seem very optimal solution.

Reply all
Reply to author
0 new messages