mikado
mikado copied to clipboard
Published
20 hours ago •
nextapps-de
nextapps-de
Support for compiling templates containing svg tags
I compiled a template with svg tags added, but the svg did not show up.
- mikado.js v0.7.64
Issue:
- Compiling a template with svg tags added does not show svg
- The svg tag should be created with Document.createElementNS.
- Probably the reason is that mikado uses Document.createElement to create elements.
- Compiling an svg tag with the class attribute set result in an error.
- The className property of the svg element is SVGAnimatedString, not String.
Code (mikado/demo/svg/svg.dev.html):
- The svg element is set to the "test-class" class.
<html lang="en">
<head>
<title>Mikado</title>
</head>
<body>
<div id="root"></div>
<template id="basic">
<svg width="1652px" height="296px" viewBox="0 0 1652 296" version="1.1" xmlns="http://www.w3.org/2000/svg"
class="test-class">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mikado-logo">
<path
d="M413.2,289.8 L360,289.8 L360,93 L410.8,93 L410.8,117 C421.6,97.8 446.8,87.4 468.4,87.4 C495.2,87.4 516.8,99 526.8,120.2 C542.4,96.2 563.2,87.4 589.2,87.4 C625.6,87.4 660.4,109.4 660.4,162.2 L660.4,289.8 L608.8,289.8 L608.8,173 C608.8,151.8 598.4,135.8 574,135.8 C551.2,135.8 537.6,153.4 537.6,174.6 L537.6,289.8 L484.8,289.8 L484.8,173 C484.8,151.8 474,135.8 450,135.8 C426.8,135.8 413.2,153 413.2,174.6 L413.2,289.8 Z M759.6,289.8 L706.4,289.8 L706.4,93 L759.6,93 L759.6,289.8 Z M759.6,53.2 L706.4,53.2 L706.4,-3.69482223e-13 L759.6,-3.69482223e-13 L759.6,53.2 Z M998.2,93 L919.4,175.8 L999.8,289.8 L934.6,289.8 L882.6,214.6 L860.6,237.8 L860.6,289.8 L807.4,289.8 L807.4,0.2 L860.6,0.2 L860.6,166.2 L928.6,93 L998.2,93 Z M1010,236.2 C1010,201 1036,181.4 1068.8,176.6 L1117.2,169.4 C1128.4,167.8 1132,162.2 1132,155.4 C1132,141.4 1121.2,129.8 1098.8,129.8 C1075.6,129.8 1062.8,144.6 1061.2,161.8 L1014,151.8 C1017.2,121 1045.6,87 1098.4,87 C1160.8,87 1184,122.2 1184,161.8 L1184,258.6 C1184,269 1185.2,283 1186.4,289.8 L1137.6,289.8 C1136.4,284.6 1135.6,273.8 1135.6,266.2 C1125.6,281.8 1106.8,295.4 1077.6,295.4 C1035.6,295.4 1010,267 1010,236.2 Z M1088.8,255.8 C1111.2,255.8 1132,245 1132,210.2 L1132,201.4 L1087.6,208.2 C1074,210.2 1063.2,217.8 1063.2,233 C1063.2,244.6 1071.6,255.8 1088.8,255.8 Z M1416.2,0.2 L1416.2,254.2 C1416.2,267.4 1417,281.8 1417.8,289.8 L1367,289.8 C1366.2,285.8 1365,276.2 1365,267 C1356.2,282.6 1336.2,294.6 1309.8,294.6 C1253.8,294.6 1213.8,250.6 1213.8,191 C1213.8,133.4 1252.6,88.2 1308.2,88.2 C1342.2,88.2 1358.2,102.2 1363.8,112.6 L1363.8,0.2 L1416.2,0.2 Z M1267.4,191 C1267.4,226.2 1288.2,247 1316.2,247 C1343.4,247 1364.6,226.2 1364.6,190.6 C1364.6,155.4 1343.4,135.8 1316.2,135.8 C1289,135.8 1267.4,155.8 1267.4,191 Z M1548.2,247.4 C1574.2,247.4 1598.2,228.6 1598.2,191.4 C1598.2,154.2 1574.2,135.4 1548.2,135.4 C1522.2,135.4 1498.2,154.2 1498.2,191.4 C1498.2,228.2 1522.2,247.4 1548.2,247.4 Z M1548.2,87 C1607,87 1651.4,130.6 1651.4,191.4 C1651.4,251.8 1607,295.8 1548.2,295.8 C1489.4,295.8 1445,251.8 1445,191.4 C1445,130.6 1489.4,87 1548.2,87 Z"
id="mikado" fill="#4A4A4A"></path>
<g id="Symbol" transform="translate(0.000000, 20.000000)">
<path
d="M240,240 L270,240 L270,270 L240,270 L240,240 Z M180,240 L210,240 L210,270 L180,270 L180,240 Z M180,180 L210,180 L210,210 L180,210 L180,180 Z M60,120 L90,120 L90,150 L60,150 L60,120 Z M120,120 L150,120 L150,150 L120,150 L120,120 Z M120,60 L150,60 L150,90 L120,90 L120,60 Z M240,0 L270,0 L270,30 L240,30 L240,0 Z M120,0 L150,0 L150,30 L120,30 L120,0 Z M240,120 L270,120 L270,150 L240,150 L240,120 Z"
id="Red" fill="#EB4642"></path>
<path
d="M60,240 L90,240 L90,270 L60,270 L60,240 Z M120,240 L150,240 L150,270 L120,270 L120,240 Z M0,240 L30,240 L30,270 L0,270 L0,240 Z M240,180 L270,180 L270,210 L240,210 L240,180 Z M60,180 L90,180 L90,210 L60,210 L60,180 Z M120,180 L150,180 L150,210 L120,210 L120,180 Z M0,180 L30,180 L30,210 L0,210 L0,180 Z M0,120 L30,120 L30,150 L0,150 L0,120 Z M240,60 L270,60 L270,90 L240,90 L240,60 Z M180,60 L210,60 L210,90 L180,90 L180,60 Z M60,60 L90,60 L90,90 L60,90 L60,60 Z M0,60 L30,60 L30,90 L0,90 L0,60 Z M180,0 L210,0 L210,30 L180,30 L180,0 Z M60,0 L90,0 L90,30 L60,30 L60,0 Z M0,0 L30,0 L30,30 L0,30 L0,0 Z"
id="Blue" fill="#58ABEA"></path>
<rect id="Yellow" fill="#FFD200" x="180" y="120" width="30" height="30"></rect>
</g>
</g>
</g>
</svg>
</template>
<script src="../../src/config.js"></script>
<script type="module">
import Mikado from "../../src/mikado.js";
import Compile from "../../src/compile.js";
Mikado.compile = Compile;
const root = document.getElementById("root");
const template = Mikado.compile("basic");
Mikado.once(root, template);
</script>
</body>
</html>
Error:
Uncaught TypeError: value.indexOf is not a function
handle_value mikado/src/compile.js:273
compile mikado/src/compile.js:155
<anonymous> mikado/demo/svg/svg.dev.html:38
compile.js:273:15
I requested a pull: #57
Code to add svg tags in the template:
<body>
<div id="root"></div>
<template id="basic">
<svg width="1652px" height="296px" viewBox="0 0 1652 296" version="1.1" xmlns="http://www.w3.org/2000/svg"
class="test-class">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="mikado-logo">
<path
d="M413.2,289.8 L360,289.8 L360,93 L410.8,93 L410.8,117 C421.6,97.8 446.8,87.4 468.4,87.4 C495.2,87.4 516.8,99 526.8,120.2 C542.4,96.2 563.2,87.4 589.2,87.4 C625.6,87.4 660.4,109.4 660.4,162.2 L660.4,289.8 L608.8,289.8 L608.8,173 C608.8,151.8 598.4,135.8 574,135.8 C551.2,135.8 537.6,153.4 537.6,174.6 L537.6,289.8 L484.8,289.8 L484.8,173 C484.8,151.8 474,135.8 450,135.8 C426.8,135.8 413.2,153 413.2,174.6 L413.2,289.8 Z M759.6,289.8 L706.4,289.8 L706.4,93 L759.6,93 L759.6,289.8 Z M759.6,53.2 L706.4,53.2 L706.4,-3.69482223e-13 L759.6,-3.69482223e-13 L759.6,53.2 Z M998.2,93 L919.4,175.8 L999.8,289.8 L934.6,289.8 L882.6,214.6 L860.6,237.8 L860.6,289.8 L807.4,289.8 L807.4,0.2 L860.6,0.2 L860.6,166.2 L928.6,93 L998.2,93 Z M1010,236.2 C1010,201 1036,181.4 1068.8,176.6 L1117.2,169.4 C1128.4,167.8 1132,162.2 1132,155.4 C1132,141.4 1121.2,129.8 1098.8,129.8 C1075.6,129.8 1062.8,144.6 1061.2,161.8 L1014,151.8 C1017.2,121 1045.6,87 1098.4,87 C1160.8,87 1184,122.2 1184,161.8 L1184,258.6 C1184,269 1185.2,283 1186.4,289.8 L1137.6,289.8 C1136.4,284.6 1135.6,273.8 1135.6,266.2 C1125.6,281.8 1106.8,295.4 1077.6,295.4 C1035.6,295.4 1010,267 1010,236.2 Z M1088.8,255.8 C1111.2,255.8 1132,245 1132,210.2 L1132,201.4 L1087.6,208.2 C1074,210.2 1063.2,217.8 1063.2,233 C1063.2,244.6 1071.6,255.8 1088.8,255.8 Z M1416.2,0.2 L1416.2,254.2 C1416.2,267.4 1417,281.8 1417.8,289.8 L1367,289.8 C1366.2,285.8 1365,276.2 1365,267 C1356.2,282.6 1336.2,294.6 1309.8,294.6 C1253.8,294.6 1213.8,250.6 1213.8,191 C1213.8,133.4 1252.6,88.2 1308.2,88.2 C1342.2,88.2 1358.2,102.2 1363.8,112.6 L1363.8,0.2 L1416.2,0.2 Z M1267.4,191 C1267.4,226.2 1288.2,247 1316.2,247 C1343.4,247 1364.6,226.2 1364.6,190.6 C1364.6,155.4 1343.4,135.8 1316.2,135.8 C1289,135.8 1267.4,155.8 1267.4,191 Z M1548.2,247.4 C1574.2,247.4 1598.2,228.6 1598.2,191.4 C1598.2,154.2 1574.2,135.4 1548.2,135.4 C1522.2,135.4 1498.2,154.2 1498.2,191.4 C1498.2,228.2 1522.2,247.4 1548.2,247.4 Z M1548.2,87 C1607,87 1651.4,130.6 1651.4,191.4 C1651.4,251.8 1607,295.8 1548.2,295.8 C1489.4,295.8 1445,251.8 1445,191.4 C1445,130.6 1489.4,87 1548.2,87 Z"
id="mikado" fill="#4A4A4A"></path>
<g id="Symbol" transform="translate(0.000000, 20.000000)">
<path
d="M240,240 L270,240 L270,270 L240,270 L240,240 Z M180,240 L210,240 L210,270 L180,270 L180,240 Z M180,180 L210,180 L210,210 L180,210 L180,180 Z M60,120 L90,120 L90,150 L60,150 L60,120 Z M120,120 L150,120 L150,150 L120,150 L120,120 Z M120,60 L150,60 L150,90 L120,90 L120,60 Z M240,0 L270,0 L270,30 L240,30 L240,0 Z M120,0 L150,0 L150,30 L120,30 L120,0 Z M240,120 L270,120 L270,150 L240,150 L240,120 Z"
id="Red" fill="#EB4642"></path>
<path
d="M60,240 L90,240 L90,270 L60,270 L60,240 Z M120,240 L150,240 L150,270 L120,270 L120,240 Z M0,240 L30,240 L30,270 L0,270 L0,240 Z M240,180 L270,180 L270,210 L240,210 L240,180 Z M60,180 L90,180 L90,210 L60,210 L60,180 Z M120,180 L150,180 L150,210 L120,210 L120,180 Z M0,180 L30,180 L30,210 L0,210 L0,180 Z M0,120 L30,120 L30,150 L0,150 L0,120 Z M240,60 L270,60 L270,90 L240,90 L240,60 Z M180,60 L210,60 L210,90 L180,90 L180,60 Z M60,60 L90,60 L90,90 L60,90 L60,60 Z M0,60 L30,60 L30,90 L0,90 L0,60 Z M180,0 L210,0 L210,30 L180,30 L180,0 Z M60,0 L90,0 L90,30 L60,30 L60,0 Z M0,0 L30,0 L30,30 L0,30 L0,0 Z"
id="Blue" fill="#58ABEA"></path>
<rect id="Yellow" fill="#FFD200" x="180" y="120" width="30" height="30"></rect>
</g>
</g>
</g>
</svg>
</template>
</body>
If the root or root ancestor element has the xmlns attribute:
- Even if the root or its ancestor element has xmlns attribute, the xmlns attribute need to be added to the content of the template.
<body>
<svg width="1652px" height="296px" viewBox="0 0 1652 296" version="1.1" id="root">
</svg>
<template id="basic">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"
xmlns="http://www.w3.org/2000/svg">
<g id="mikado-logo">
<path
d="M413.2,289.8 L360,289.8 L360,93 L410.8,93 L410.8,117 C421.6,97.8 446.8,87.4 468.4,87.4 C495.2,87.4 516.8,99 526.8,120.2 C542.4,96.2 563.2,87.4 589.2,87.4 C625.6,87.4 660.4,109.4 660.4,162.2 L660.4,289.8 L608.8,289.8 L608.8,173 C608.8,151.8 598.4,135.8 574,135.8 C551.2,135.8 537.6,153.4 537.6,174.6 L537.6,289.8 L484.8,289.8 L484.8,173 C484.8,151.8 474,135.8 450,135.8 C426.8,135.8 413.2,153 413.2,174.6 L413.2,289.8 Z M759.6,289.8 L706.4,289.8 L706.4,93 L759.6,93 L759.6,289.8 Z M759.6,53.2 L706.4,53.2 L706.4,-3.69482223e-13 L759.6,-3.69482223e-13 L759.6,53.2 Z M998.2,93 L919.4,175.8 L999.8,289.8 L934.6,289.8 L882.6,214.6 L860.6,237.8 L860.6,289.8 L807.4,289.8 L807.4,0.2 L860.6,0.2 L860.6,166.2 L928.6,93 L998.2,93 Z M1010,236.2 C1010,201 1036,181.4 1068.8,176.6 L1117.2,169.4 C1128.4,167.8 1132,162.2 1132,155.4 C1132,141.4 1121.2,129.8 1098.8,129.8 C1075.6,129.8 1062.8,144.6 1061.2,161.8 L1014,151.8 C1017.2,121 1045.6,87 1098.4,87 C1160.8,87 1184,122.2 1184,161.8 L1184,258.6 C1184,269 1185.2,283 1186.4,289.8 L1137.6,289.8 C1136.4,284.6 1135.6,273.8 1135.6,266.2 C1125.6,281.8 1106.8,295.4 1077.6,295.4 C1035.6,295.4 1010,267 1010,236.2 Z M1088.8,255.8 C1111.2,255.8 1132,245 1132,210.2 L1132,201.4 L1087.6,208.2 C1074,210.2 1063.2,217.8 1063.2,233 C1063.2,244.6 1071.6,255.8 1088.8,255.8 Z M1416.2,0.2 L1416.2,254.2 C1416.2,267.4 1417,281.8 1417.8,289.8 L1367,289.8 C1366.2,285.8 1365,276.2 1365,267 C1356.2,282.6 1336.2,294.6 1309.8,294.6 C1253.8,294.6 1213.8,250.6 1213.8,191 C1213.8,133.4 1252.6,88.2 1308.2,88.2 C1342.2,88.2 1358.2,102.2 1363.8,112.6 L1363.8,0.2 L1416.2,0.2 Z M1267.4,191 C1267.4,226.2 1288.2,247 1316.2,247 C1343.4,247 1364.6,226.2 1364.6,190.6 C1364.6,155.4 1343.4,135.8 1316.2,135.8 C1289,135.8 1267.4,155.8 1267.4,191 Z M1548.2,247.4 C1574.2,247.4 1598.2,228.6 1598.2,191.4 C1598.2,154.2 1574.2,135.4 1548.2,135.4 C1522.2,135.4 1498.2,154.2 1498.2,191.4 C1498.2,228.2 1522.2,247.4 1548.2,247.4 Z M1548.2,87 C1607,87 1651.4,130.6 1651.4,191.4 C1651.4,251.8 1607,295.8 1548.2,295.8 C1489.4,295.8 1445,251.8 1445,191.4 C1445,130.6 1489.4,87 1548.2,87 Z"
id="mikado" fill="#4A4A4A"></path>
<g id="Symbol" transform="translate(0.000000, 20.000000)">
<path
d="M240,240 L270,240 L270,270 L240,270 L240,240 Z M180,240 L210,240 L210,270 L180,270 L180,240 Z M180,180 L210,180 L210,210 L180,210 L180,180 Z M60,120 L90,120 L90,150 L60,150 L60,120 Z M120,120 L150,120 L150,150 L120,150 L120,120 Z M120,60 L150,60 L150,90 L120,90 L120,60 Z M240,0 L270,0 L270,30 L240,30 L240,0 Z M120,0 L150,0 L150,30 L120,30 L120,0 Z M240,120 L270,120 L270,150 L240,150 L240,120 Z"
id="Red" fill="#EB4642"></path>
<path
d="M60,240 L90,240 L90,270 L60,270 L60,240 Z M120,240 L150,240 L150,270 L120,270 L120,240 Z M0,240 L30,240 L30,270 L0,270 L0,240 Z M240,180 L270,180 L270,210 L240,210 L240,180 Z M60,180 L90,180 L90,210 L60,210 L60,180 Z M120,180 L150,180 L150,210 L120,210 L120,180 Z M0,180 L30,180 L30,210 L0,210 L0,180 Z M0,120 L30,120 L30,150 L0,150 L0,120 Z M240,60 L270,60 L270,90 L240,90 L240,60 Z M180,60 L210,60 L210,90 L180,90 L180,60 Z M60,60 L90,60 L90,90 L60,90 L60,60 Z M0,60 L30,60 L30,90 L0,90 L0,60 Z M180,0 L210,0 L210,30 L180,30 L180,0 Z M60,0 L90,0 L90,30 L60,30 L60,0 Z M0,0 L30,0 L30,30 L0,30 L0,0 Z"
id="Blue" fill="#58ABEA"></path>
<rect id="Yellow" fill="#FFD200" x="180" y="120" width="30" height="30"></rect>
</g>
</g>
</g>
</template>
</body>
I found that svg sprite using the use tag is not supported. The xlink:href attribute of the use tag must be supported.
Code using SVG sprite of Bootstrap Icons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<template id="basic">
<div>
<svg class="bi" width="16" height="16" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#pencil-fill" />
</svg>
<svg class="bi" width="16" height="16" fill="currentColor">
<use xlink:href="bootstrap-icons.svg#pen-fill" />
</svg>
</div>
</template>
<script src="../../src/config.js"></script>
<script type="module">
import Mikado from "../../src/mikado.js";
import Compile from "../../src/compile.js";
Mikado.compile = Compile;
const root = document.getElementById("root");
const template = Mikado.compile("basic");
Mikado.once(root, template);
</script>
</body>
</html>
SVG are fully supported by Mikado v0.8.x I've tested the mikado svg icon. Please give me feedback if something didn't work as expected.
Template example:
<div>
<h1>Title</h1>
<svg xmlns="http://www.w3.org/2000/svg"><!-- svg markup --></svg>
</div>