From d4804337fa819a16d9ebb2f1ca8596ad938a047b Mon Sep 17 00:00:00 2001
From: Tim Svensson <tim.svensson@divid.se>
Date: Tue, 3 Sep 2024 14:03:33 +0200
Subject: [PATCH] svg-new-center7

---
 packages/abstract-3d/src/renderers/svg/svg-encoding.ts    | 8 ++++----
 .../src/app/abstract-3d-example.tsx                       | 8 +++++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/abstract-3d/src/renderers/svg/svg-encoding.ts b/packages/abstract-3d/src/renderers/svg/svg-encoding.ts
index fc0c9a8..9eab231 100644
--- a/packages/abstract-3d/src/renderers/svg/svg-encoding.ts
+++ b/packages/abstract-3d/src/renderers/svg/svg-encoding.ts
@@ -1,10 +1,10 @@
 import { Vec2, vec2Add, vec2Scale } from "../../abstract-3d";
 
 export const svg = (width: number, height: number, center: Vec2, children: string): string =>
-  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${(-(-center.x + width / 2)).toFixed()} ${(-(
-    center.y +
-    height / 2
-  )).toFixed(0)} ${width.toFixed(0)} ${height.toFixed(0)}" width="${width.toFixed(0)}px" height="${height.toFixed(
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${(center.x * 2 - width / 2).toFixed()} ${(
+    -center.y * 2 +
+    -height / 2
+  ).toFixed(0)} ${width.toFixed(0)} ${height.toFixed(0)}" width="${width.toFixed(0)}px" height="${height.toFixed(
     0
   )}px">${children} </svg>`;
 
diff --git a/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx b/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx
index c88c0c5..9529438 100644
--- a/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx
+++ b/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx
@@ -26,7 +26,9 @@ export function Abstract3DExample(): React.ReactNode {
         </button>
       </div>
       <div
-        dangerouslySetInnerHTML={{ __html: A3D.toSvg(scene, "front", 2, { size: 300, scaleByWidth: true }).image }}
+        dangerouslySetInnerHTML={{
+          __html: A3D.toSvg(scene, "front", 3, { size: 300, scaleByWidth: true }, true, false).image,
+        }}
       />
       {/* <div style={{ height: "calc(100% - 20px)" }}>
         <A3D.toReact scene={scene} />
@@ -35,7 +37,7 @@ export function Abstract3DExample(): React.ReactNode {
   );
 }
 
-const scene: A3D.Scene = {
+const scene2: A3D.Scene = {
   center_deprecated: A3D.vec3(100, 100, 100),
   size_deprecated: A3D.vec3(300, 300, 300),
   groups: [
@@ -95,7 +97,7 @@ const scene3: A3D.Scene = {
   ],
 };
 
-const scene2 = {
+const scene = {
   center_deprecated: {
     x: 50,
     y: 425.00000000000006,