diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
index df9c55d0ace1..8b338fff11ce 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.css
@@ -1,7 +1,3 @@
-::ng-deep #chart-demo {
-  height: 460px;
-}
-
 ::ng-deep #chart {
   position: absolute;
   top: 12px;
@@ -10,7 +6,7 @@
   height: 347px;
 }
 
-::ng-deep .chart_environment {
+::ng-deep .chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +15,18 @@
 ::ng-deep .controls-pane {
   text-align: center;
 }
+
+::ng-deep .custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+::ng-deep .custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+::ng-deep .custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
index 4d669c49873f..cf5542b767a6 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.html
@@ -1,5 +1,5 @@
-<div class="chart_environment">
-  <div id="custom_markup_container">
+<div class="chart-environment">
+  <div id="custom-markup-container">
     <svg version="1.1" width="820px" height="420px">
       <path
         d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0"
@@ -17,13 +17,7 @@
       ></path>
       <text
         transform="translate(30,89)"
-        style="
-          fill: #ffffff;
-          font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
-            sans-serif;
-          font-size: 36px;
-          font-weight: bold;
-        "
+        class="custom-markup-text custom-markup-text-title"
       >
         <tspan x="0" y="0">Export</tspan>
         <tspan x="0" y="38">Custom</tspan>
@@ -31,13 +25,7 @@
       </text>
       <text
         transform="translate(32,199)"
-        style="
-          opacity: 0.8;
-          fill: #ffffff;
-          font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana,
-            sans-serif;
-          font-size: 14px;
-        "
+        class="custom-markup-text custom-markup-text-subtitle"
       >
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
index 82d031e494cd..4029ce6e01ff 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Angular/app/app.component.ts
@@ -54,13 +54,33 @@ export class AppComponent {
   }
 
   prepareMarkup() {
+    const sourceContainer = document.getElementById('custom-markup-container');
+    const sourceElements = sourceContainer.querySelectorAll('*');
+
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
     svg.setAttribute('version', '1.1');
     svg.setAttribute('width', '820px');
     svg.setAttribute('height', '420px');
-    svg.innerHTML = document.getElementById('custom_markup_container').innerHTML;
+
+    const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
+    const clonedElements = clonedContainer.querySelectorAll('*');
+
+    clonedElements.forEach((clonedEl, index) => {
+      const sourceEl = sourceElements[index] as HTMLElement;
+      if (!sourceEl) return;
+
+      const computed = window.getComputedStyle(sourceEl);
+      ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+        const value = computed.getPropertyValue(prop)?.trim();
+        if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+          (clonedEl as SVGElement).setAttribute(prop, value);
+        }
+      });
+    });
+
+    svg.innerHTML = clonedContainer.innerHTML;
 
     const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
     group.setAttribute('transform', 'translate(305,12)');
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
index c419d77ee303..2bab05e1c456 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/App.tsx
@@ -16,15 +16,31 @@ import Form from './Form.tsx';
 
 const barPadding = 0.3;
 
-const prepareMarkup = (chartSVG: string, markup: string) => {
+const prepareMarkup = (chartSVG: string, sourceContainer: HTMLElement) => {
+  const sourceElements = sourceContainer.querySelectorAll('*');
+
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
   svg.setAttribute('version', '1.1');
   svg.setAttribute('width', '820px');
   svg.setAttribute('height', '420px');
-  svg.innerHTML = markup;
+  const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
+  const clonedElements = clonedContainer.querySelectorAll('*');
+
+  clonedElements.forEach((clonedEl, index) => {
+    const sourceEl = sourceElements[index] as HTMLElement;
+    if (!sourceEl) return;
 
+    const computed = window.getComputedStyle(sourceEl);
+    ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+      const value = computed.getPropertyValue(prop)?.trim();
+      if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+        (clonedEl as SVGElement).setAttribute(prop, value);
+      }
+    });
+  });
+  svg.innerHTML = clonedContainer.innerHTML;
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   group.setAttribute('transform', 'translate(305,12)');
   group.innerHTML = chartSVG;
@@ -40,7 +56,7 @@ function App() {
   const onClick = useCallback(() => {
     exportFromMarkup(
       prepareMarkup(chartRef.current?.instance().svg() ?? '',
-        childRef.current?.innerHTML ?? ''), {
+        childRef.current ?? document.createElement('div')), {
         width: 820,
         height: 420,
         margin: 0,
@@ -68,7 +84,7 @@ function App() {
 
   return (
     <div id="chart-demo">
-      <div className="chart_environment">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx b/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx
index e73253dd720c..c970578fa8f3 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/Form.tsx
@@ -1,26 +1,18 @@
 import React from 'react';
 
-const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
-
 const Form = React.forwardRef<HTMLDivElement>((_, ref) => (
-  <div id="custom_markup_container" ref={ref}>
+  <div id="custom-markup-container" ref={ref}>
     <svg width="820px" height="420px">
       <path opacity="1" d="M 0 0 L 820 0 L 820 420 L 0 420 L 0 0" stroke="#999999" strokeWidth="1"
         strokeLinecap="butt" fill="white" strokeLinejoin="miter"></path>
       <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
       <path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
-      <text transform="translate(30,89)"
-        style={{
-          fill: '#FFFFFF', fontFamily, fontSize: 36, fontWeight: 'bold',
-        }}>
+      <text transform="translate(30,89)" className="custom-markup-text custom-markup-text-title">
         <tspan x="0" y="0">Export </tspan>
         <tspan x="0" y="38">Custom</tspan>
         <tspan x="0" y="76">Markup</tspan>
       </text>
-      <text transform="translate(32,199)"
-        style={{
-          opacity: 0.8, fill: '#FFFFFF', fontFamily, fontSize: 14,
-        }}>
+      <text transform="translate(32,199)" className="custom-markup-text custom-markup-text-subtitle">
         <tspan x="0" y="0">Export a chart with</tspan>
         <tspan x="0" y="19.2">custom elements</tspan>
       </text>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
index d1c3833b7043..a8e4f5ab3fe5 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/React/styles.css
@@ -10,7 +10,7 @@
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +19,18 @@
 .controls-pane {
   text-align: center;
 }
+
+.custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+.custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
index 0e8dfbf8e978..518953376cef 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/App.js
@@ -14,14 +14,36 @@ import { dataSource } from './data.js';
 import Form from './Form.js';
 
 const barPadding = 0.3;
-const prepareMarkup = (chartSVG, markup) => {
+const prepareMarkup = (chartSVG, sourceContainer) => {
+  const sourceElements = sourceContainer.querySelectorAll('*');
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
   svg.setAttribute('version', '1.1');
   svg.setAttribute('width', '820px');
   svg.setAttribute('height', '420px');
-  svg.innerHTML = markup;
+  const clonedContainer = sourceContainer.cloneNode(true);
+  const clonedElements = clonedContainer.querySelectorAll('*');
+  clonedElements.forEach((clonedEl, index) => {
+    const sourceEl = sourceElements[index];
+    if (!sourceEl) return;
+    const computed = window.getComputedStyle(sourceEl);
+    [
+      'fill',
+      'font-family',
+      'font-size',
+      'font-weight',
+      'opacity',
+      'stroke',
+      'stroke-width',
+    ].forEach((prop) => {
+      const value = computed.getPropertyValue(prop)?.trim();
+      if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+        clonedEl.setAttribute(prop, value);
+      }
+    });
+  });
+  svg.innerHTML = clonedContainer.innerHTML;
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   group.setAttribute('transform', 'translate(305,12)');
   group.innerHTML = chartSVG;
@@ -33,7 +55,10 @@ function App() {
   const chartRef = useRef(null);
   const onClick = useCallback(() => {
     exportFromMarkup(
-      prepareMarkup(chartRef.current?.instance().svg() ?? '', childRef.current?.innerHTML ?? ''),
+      prepareMarkup(
+        chartRef.current?.instance().svg() ?? '',
+        childRef.current ?? document.createElement('div'),
+      ),
       {
         width: 820,
         height: 420,
@@ -55,7 +80,7 @@ function App() {
   }, []);
   return (
     <div id="chart-demo">
-      <div className="chart_environment">
+      <div className="chart-environment">
         <Form ref={childRef} />
         <Chart
           ref={chartRef}
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js
index 7c13496ee22b..5434f47eec13 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/Form.js
@@ -1,9 +1,8 @@
 import React from 'react';
 
-const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
 const Form = React.forwardRef((_, ref) => (
   <div
-    id="custom_markup_container"
+    id="custom-markup-container"
     ref={ref}
   >
     <svg
@@ -30,12 +29,7 @@ const Form = React.forwardRef((_, ref) => (
       ></path>
       <text
         transform="translate(30,89)"
-        style={{
-          fill: '#FFFFFF',
-          fontFamily,
-          fontSize: 36,
-          fontWeight: 'bold',
-        }}
+        className="custom-markup-text custom-markup-text-title"
       >
         <tspan
           x="0"
@@ -58,12 +52,7 @@ const Form = React.forwardRef((_, ref) => (
       </text>
       <text
         transform="translate(32,199)"
-        style={{
-          opacity: 0.8,
-          fill: '#FFFFFF',
-          fontFamily,
-          fontSize: 14,
-        }}
+        className="custom-markup-text custom-markup-text-subtitle"
       >
         <tspan
           x="0"
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
index d1c3833b7043..a8e4f5ab3fe5 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/ReactJs/styles.css
@@ -10,7 +10,7 @@
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +19,18 @@
 .controls-pane {
   text-align: center;
 }
+
+.custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+.custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
index bc1dbc8f195e..af13bed50d22 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="chart-demo">
-    <div class="chart_environment">
+    <div class="chart-environment">
       <Form ref="form"/>
       <DxChart
         id="chart"
@@ -75,20 +75,32 @@ import Form from './Form.vue';
 const form = ref();
 const chart = ref();
 
-const prepareMarkup = (chartSVG: string, markup: string): SVGElement => {
+const prepareMarkup = (chartSVG: string, sourceContainer: HTMLElement): SVGElement => {
+  const sourceElements = sourceContainer.querySelectorAll('*');
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
   svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
   svg.setAttribute('version', '1.1');
   svg.setAttribute('width', '820px');
   svg.setAttribute('height', '420px');
-  svg.innerHTML = markup;
-
+  const clonedContainer = sourceContainer.cloneNode(true) as HTMLElement;
+  const clonedElements = clonedContainer.querySelectorAll('*');
+  clonedElements.forEach((clonedEl, index) => {
+    const sourceEl = sourceElements[index] as HTMLElement;
+    if (!sourceEl) return;
+    const computed = window.getComputedStyle(sourceEl);
+    ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+      const value = computed.getPropertyValue(prop)?.trim();
+      if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+        (clonedEl as SVGElement).setAttribute(prop, value);
+      }
+    });
+  });
+  svg.innerHTML = clonedContainer.innerHTML;
   const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
   group.setAttribute('transform', 'translate(305,12)');
   group.innerHTML = chartSVG;
   svg.appendChild(group);
-
   return svg;
 };
 
@@ -127,7 +139,7 @@ function onClick(): void {
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
index d81bd148391e..3650ad53fb12 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/Vue/Form.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="custom_markup_container">
+  <div class="custom-markup-container">
     <svg
       version="1.1"
       width="820px"
@@ -24,11 +24,7 @@
       />
       <text
         transform="translate(30,89)"
-        :style="{ fill: '#fff',
-                  fontFamily: fontFamily,
-                  fontSize: '36px',
-                  fontWeight: 'bold',
-        }"
+        class="custom-markup-text custom-markup-text-title"
       >
         <tspan
           x="0"
@@ -45,11 +41,7 @@
       </text>
       <text
         transform="translate(32,199)"
-        :style="{ opacity: '0.8',
-                  fill: '#fff',
-                  fontFamily: fontFamily,
-                  fontSize: '14px'
-        }"
+        class="custom-markup-text custom-markup-text-subtitle"
       >
         <tspan
           x="0"
@@ -65,11 +57,26 @@
 </template>
 <script setup lang="ts">
 
-const fontFamily = "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif";
 defineExpose({
-  getMarkup(): string {
+  getMarkup(): HTMLElement {
     // @ts-ignore
-    return this.$el.innerHTML;
+    return this.$el;
   },
 });
 </script>
+<style>
+.custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+.custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
+</style>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.html b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.html
index 9f9c1cd23f5b..69613a5a2a8c 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.html
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.html
@@ -17,17 +17,17 @@
   <body class="dx-viewport">
     <div class="demo-container">
       <div id="chart-demo">
-        <div class="chart_environment">
-          <div id="custom_markup_container">
+        <div class="chart-environment">
+          <div id="custom-markup-container">
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="820px" height="420px">
               <path d="M 13 407 L 128 407 L 232 39 L 13 39" fill="#6D39C3"></path>
               <path d="M 46 381 L 161 381 L 265 13 L 46 13" opacity="0.5" fill="#6D39C3"></path>
-              <text transform="translate(30,89)" style="fill: #ffffff; font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif; font-size: 36px; font-weight: bold">
+              <text transform="translate(30,89)" class="custom-markup-text custom-markup-text-title">
                 <tspan x="0" y="0">Export</tspan>
                 <tspan x="0" y="38">Custom</tspan>
                 <tspan x="0" y="76">Markup</tspan>
               </text>
-              <text transform="translate(32,199)" style="opacity: 0.8; fill: #ffffff; font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif; font-size: 14px">
+              <text transform="translate(32,199)" class="custom-markup-text custom-markup-text-subtitle">
                 <tspan x="0" y="0">Export a chart with</tspan>
                 <tspan x="0" y="19.2">custom elements</tspan>
               </text>
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js
index 8e9a92b02b06..150caaba4e4b 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/index.js
@@ -66,13 +66,33 @@ $(() => {
   });
 
   function prepareMarkup() {
+    const sourceContainer = document.getElementById('custom-markup-container');
+    const sourceElements = sourceContainer.querySelectorAll('*');
+
     const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
     svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
     svg.setAttribute('version', '1.1');
     svg.setAttribute('width', '820px');
     svg.setAttribute('height', '420px');
-    svg.innerHTML = document.getElementById('custom_markup_container').innerHTML;
+
+    const clonedContainer = sourceContainer.cloneNode(true);
+    const clonedElements = clonedContainer.querySelectorAll('*');
+
+    clonedElements.forEach((clonedEl, index) => {
+      const sourceEl = sourceElements[index];
+      if (!sourceEl) return;
+
+      const computed = window.getComputedStyle(sourceEl);
+      ['fill', 'font-family', 'font-size', 'font-weight', 'opacity', 'stroke', 'stroke-width'].forEach((prop) => {
+        const value = computed.getPropertyValue(prop)?.trim();
+        if (value && value !== 'auto' && value !== 'normal' && value !== 'initial') {
+          clonedEl.setAttribute(prop, value);
+        }
+      });
+    });
+
+    svg.innerHTML = clonedContainer.innerHTML;
 
     const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
     group.setAttribute('transform', 'translate(305,12)');
diff --git a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
index d1c3833b7043..a8e4f5ab3fe5 100644
--- a/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
+++ b/apps/demos/Demos/Charts/ExportCustomMarkup/jQuery/styles.css
@@ -10,7 +10,7 @@
   height: 347px;
 }
 
-.chart_environment {
+.chart-environment {
   width: 820px;
   position: relative;
   margin: 0 auto;
@@ -19,3 +19,18 @@
 .controls-pane {
   text-align: center;
 }
+
+.custom-markup-text {
+  fill: #fff;
+  font-family: 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana, sans-serif;
+}
+
+.custom-markup-text-title {
+  font-size: 36px;
+  font-weight: bold;
+}
+
+.custom-markup-text-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
diff --git a/apps/demos/utils/server/csp-server.js b/apps/demos/utils/server/csp-server.js
index 48ae19c2cedf..48922bb01970 100644
--- a/apps/demos/utils/server/csp-server.js
+++ b/apps/demos/utils/server/csp-server.js
@@ -208,10 +208,6 @@ const CSP_DEMO_ALLOWLIST = {
   'Chat/AIAndChatbotIntegration': {
     'script-src': ["'unsafe-inline'"],
   },
-  // TODO: fix inline style attributes in SVG markup
-  'Charts/ExportCustomMarkup': {
-    'style-src': ["'unsafe-inline'"],
-  },
 };
 
 // Framework-specific overrides (e.g. Font Awesome loaded only in React/Vue demos)