SVGs not working properly in latest v7 version
shaunroselt opened this issue · comments
This is difficult to explain, but run the following code with v5 and then you'll see it's working perfectly fine. All SVGs are displaying. I can go between paginations and it just works perfectly fine.
But then switch the exact same code to v7 and it's broken there. Once you start going to different pagniations, you'll see the SVGs aren't showing.
Any ideas? Here's the code:
<!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>
<!-- version 5.0 -->
<!-- <link href="https://cdn.jsdelivr.net/npm/simple-datatables@5.0/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@5.0" type="text/javascript"></script> -->
<!-- version 7.2 (latest) -->
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@7.2/dist/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@7.2" type="text/javascript"></script>
<style>
body {
background-color: #ccc;
}
.Table tr td img, .Table tr td svg {
height: 40px;
width: 40px;
margin-right: 10px;
vertical-align: middle !important;
}
.Table td, .Table th {
padding: 0px;
vertical-align: middle !important;
}
</style>
</head>
</head>
<body>
<div id="tblMachines"></div>
<script>
const MachineTypeIconCode = [
{
code_name: `Scaler`,
code: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
<g>
<circle style="fill: #161719" cx="785.77769" cy="2722.76844" r="268.60136"/>
<circle style="fill: #161719" cx="2469.10822" cy="2722.76844" r="268.60136"/>
<path style="fill: #161719" d="M2251.275,2358.344l84.69517,77.49579c-136.81895,69.75272-208.755,238.20138-157.11006,395.45748H1180.32648V2722.77233h-91.47229c2.49973-37.17335,3.04367-125.18807-53.35749-200.184-97.91689-130.204-327.57163-168.06721-463.25416-45.80921-92.39766,83.25849-122.98849,224.3304-77.9341,354.51813H308.30695L3.27986,2722.76844,0,2274.86635l494.30844-99.09364H974.518v-95.27894h274.40873v464.96671l232.47924,110.5216h148.64466V2522.58835a308.51381,308.51381,0,0,1-224.86611-99.08556V1821.3276h-27.71758v-64.78546h823.0398l50.7683,22.86406Z"/>
<path style="fill: #161719" d="M2949.91694,2470.68864v145.80768a835.912,835.912,0,0,1-190.5959,0,354.506,354.506,0,0,0-43.88252-81.4244c-21.93965-30.38957-43.31409-56.57044-72.54389-78.072Z"/>
<polygon style="fill: #161719" points="2635.581 2435.222 2835.198 2442.886 2835.198 2404.221 2578.685 2137.947 2463.69 2086.773 2336.401 2094.239 2445.564 2158.615 2635.581 2435.222"/>
<path style="fill: #161719" d="M2336.40142,2072.45269l129.307-7.5333,12.72614-47.93921a2850.738,2850.738,0,0,0,251.41867-256.34977c103.6051-119.85624,195.77594-242.92773,267.05627-355.91076-4.77019-15.12349-8.48382-41.31327-13.254-56.43675-132.769,119.47-276.38433,270.86838-411.2717,427.11074C2486.18549,1875.23859,2407.76179,1974.72761,2336.40142,2072.45269Z"/>
<path style="fill: #161719" d="M2996.90949,1344.37959l13.87872,56.7062a2780.44544,2780.44544,0,0,0,355.75215,39.26512c154.17448,6.80751,289.00705-.92231,402.94342-14.83632q62.79871,39.95907,125.59749,79.91808l35.25475-49.58987-138.61139-97.27266q-197.28083-4.55364-394.29408-8.08Q3197.01272,1346.90292,2996.90949,1344.37959Z"/>
<polygon style="fill: #161719" points="3814.13 1363.759 3935.324 1446.735 3977.721 1408.422 3994.045 1297.423 3918.644 1240.77 3844.751 1307.545 3814.13 1363.759"/>
<polygon style="fill: #161719" points="3927.275 1232.971 3997.934 1287.42 4043.917 1186.716 3997.88 1156.774 3927.275 1232.971"/>
<polygon style="fill: #161719" points="4008.328 1147.333 4012.091 1150.032 4045.861 1174.256 4096 1068.107 4083.109 1053.842 4008.328 1147.333"/>
<polygon style="fill: #161719" points="2615.274 2152.28 2645.826 2182.046 2755.502 1803.042 2729.445 1774.208 2695.638 1814.324 2615.274 2152.28"/>
<polygon style="fill: #161719" points="2737.71 1766.74 2763.766 1795.575 3100.321 1551.11 3075.851 1524.031 2762.502 1744.336 2737.71 1766.74"/>
<polygon style="fill: #161719" points="3081.911 1518.554 3106.382 1545.634 3113.429 1514.669 3096.191 1423.307 3005.284 1405.058 3081.911 1518.554"/>
<polygon style="fill: #161719" points="3120.635 1512.862 3115.064 1545.634 3221.779 1508.31 3779.577 1556.298 3746.014 1516.68 3239.037 1465.385 3224.833 1438.593 3171.163 1437.9 3193.652 1474.969 3120.635 1512.862"/>
<polygon style="fill: #161719" points="3695.198 1440.88 3783.984 1552.315 3852.852 1490.082 3822.45 1469.729 3778.142 1508.589 3724.937 1437.9 3695.198 1440.88"/>
</g>
</svg>
`
},
{
code_name: `LHD`,
code: `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4096 4096">
<g>
<path style="fill: #161719" d="M7.6719,1680.55315H1365.62666v-222.4898l464.15914,5.754c17.01138,10.6247,41.00986,26.12614,69.04893,46.03243,33.55695,23.82347,50.335,35.7352,62.33556,48.90928,15.001,16.468,39.66629,51.38742,43.15491,117.958l474.22919,4.795L2602.267,1888.65769c-17.64413-1.64918-311.64551-23.97313-490.53244,211.94071-127.22992,167.78946-144.68018,398.22547-44.59451,589.31l-775.35679,1.43848c97.71715-186.724,89.51123-407.95559-23.97514-573.48646-132.97129-193.95184-349.58589-222.61781-381.68529-226.32565-29.43469-3.4-269.50029-26.94769-448.81533,157.27717C233.53713,2258.16209,297.70809,2541.14431,302.087,2559.00384Q151.04307,2507.93671,0,2456.8696,3.8355,2068.71138,7.6719,1680.55315Z"/>
<circle style="fill: #161719" cx="2539.13189" cy="2427.46008" r="485.41761"/>
<path style="fill: #161719" d="M4096,1869.12922c-131.35973,110.16474-277.68138,223.66973-439.59751,336.62659-117.89064,82.23985-232.93911,156.44226-343.76194,223.39176a404.0608,404.0608,0,0,1-232.00285,47.41578q2.16358-24.26489,2.18448-49.10259c0-223.05447-134.32007-414.73426-326.48065-498.56825a403.63466,403.63466,0,0,1,45.65341-81.33756c117.88219-92.5295,253.36605-155.19445,371.24825-247.7322l327.61912,169.279Z"/>
<circle style="fill: #161719" cx="818.35284" cy="2423.78388" r="485.41761"/>
<polygon style="fill: #161719" points="1396.049 1730.479 973.395 1730.479 973.395 1458.063 1365.627 1458.063 1396.049 1730.479"/>
</g>
</svg>
`
}
];
const MachineTypeIcons = [
{
name: `Scalar`,
code_name: `Scaler`
},
{
name: `LHD`,
code_name: `LHD`
}
];
function GetMachineTypeIcon(name = ""){
name = name.toLowerCase();
const icon = MachineTypeIcons.find(x => {if (x.name.toLowerCase() == name) return true});
if (icon != undefined)
return MachineTypeIconCode.find(x => {if (x.code_name.toLowerCase() == icon.code_name.toLowerCase()) return true}).code;
}
function GenerateTable(TableName, HeadDefinition = []) {
let HeadingsHTML = "";
for (let i in HeadDefinition) {
let HeadingName = "";
if ((HeadDefinition[i] !== "") && (HeadDefinition[i] !== undefined)) HeadingName = HeadDefinition[i];
HeadingsHTML += `<th>${HeadingName}</th>`;
}
const TableHTML = `
<table class="Table" id="Table${TableName}">
<thead id="TableHead${TableName}">
<tr>
${HeadingsHTML}
</tr>
</thead>
<tbody id="TableBody${TableName}">
<!-- Dynamically populated -->
</tbody>
<tfoot id="TableFoot${TableName}">
<! -- Not being used -->
</tfoot>
</table>
`;
return TableHTML;
}
const TableParent = document.getElementById("tblMachines");
const TableHeadingsArray = ["Name","Type"];
TableParent.innerHTML = GenerateTable(TableParent.id,TableHeadingsArray);
const Table = document.getElementById(`TableBody${TableParent.id}`);
Table.innerHTML = "";
for (let i = 0; i < 100; i++) {
const TableRow = Table.insertRow(-1);
const MachineType = MachineTypeIcons[Math.floor(Math.random() * MachineTypeIcons.length)].name;
TableRow.innerHTML = `
<td>Machine ${i}</td>
<td>
${GetMachineTypeIcon(MachineType)}
<span>${MachineType}</span>
</td>
`;
}
let dataTable = new simpleDatatables.DataTable(`#Table${TableParent.id}`, {
searchable: true,
sortable: true,
perPage: 15,
perPageSelect: [5,10,15,20,25,50,100,250,500,1000]
});
</script>
</body>
</html>@johanneswilm Thanks for fixing this.
Could you do a v7.2.1 release with the new fixes, please?
There will be a regular release soon. Most likely today or tomorrow.
…On Tue, Jul 11, 2023, 15:33 Shaun Roselt ***@***.***> wrote:
@johanneswilm <https://github.com/johanneswilm> Thanks for fixing this.
Could you do a v7.2.1 release with the new fixes, please?
—
Reply to this email directly, view it on GitHub
<#308 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAERMODTMKGY2FEAT7STGLLXPVIZXANCNFSM6AAAAAA2DMXPII>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
Fantastic!
Thank You!
What ended up being the issue as to why the SVGs didn't work on v7, but did work on v5? What was the solution to fix it?
Issues in diffdom. You can look at the 5.0.6 release there.
…On Tue, Jul 11, 2023, 15:47 Shaun Roselt ***@***.***> wrote:
Fantastic!
Thank You!
------------------------------
What ended up being the issue as to why the SVGs didn't work on v7, but
did work on v5? What was the solution to fix it?
—
Reply to this email directly, view it on GitHub
<#308 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAERMOF3YD5PJ7GB3MZLW6LXPVKQTANCNFSM6AAAAAA2DMXPII>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
Ah I see. Thank you.
For future reference for anyone that comes here. This is where it was fixed: fiduswriter/diffDOM@1b3cfe7
Yes, the above fix was needed for my reworked version of your example used in demo 21. For your code, the required changes were here: fiduswriter/diffDOM@b3c79e7 (line 126-131). It was making changes inside of SVGs. And elements inside of SVGs need to be added with a namespace, which is different from how element inside of HTML are added.