fix: map ink transparency to SVG opacity

src/components/PageReader.test.tsx

@@ -82,6 +82,7 @@ const page: OneNotePageDto = {
           ],
           width: 2,
           color: 0xff0000,
+          transparency: 255,
         },
       ],
       children: [],
@@ -127,6 +128,10 @@ describe('PageReader structured content', () => {
       'd',
       'M 10 20 L 15 25 30 40'
     );
+    expect(document.querySelector('.onenote-ink path')).toHaveAttribute(
+      'stroke-opacity',
+      '0'
+    );
     await waitFor(() =>
       expect(
         screen.getByRole('img', { name: 'Embedded diagram' })

src/components/PageReader.tsx

@@ -464,7 +464,7 @@ function InkView({ ink }: { ink: OneNoteInkBlock }) {
               strokeOpacity={
                 stroke.transparency === undefined
                   ? undefined
-                  : Math.max(0, Math.min(1, (255 - stroke.transparency) / 256))
+                  : Math.max(0, Math.min(1, 1 - stroke.transparency / 255))
               }
               strokeLinecap={stroke.penTip === 0 ? 'round' : 'square'}
               strokeLinejoin={stroke.penTip === 0 ? 'round' : 'bevel'}