'tikzjax badly clips when two pictures together

I am using the tikzjax extension to enable the latex tikz package to be used within a php script. The minimal example below demonstrates the problem. The script <head> uses the information from https://tikzjax.com/. Then follows the exact same tikzpicture except the positioning of the node B in both cases (the second case is the reflection of the first). The problem is the \clip doesn't work in the second case. If the first case is commented out, then it works. Here's a picture of the output from my browser:

The problem is tha the clip seems to follow the same kind of path in the second instance as for the first. How can this situation be solved, could it be a tikzjax bug? Are we not supposed to have more than one such diagram rendered in a php page?

<?php

echo '<head><link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css">
<script src="https://tikzjax.com/v1/tikzjax.js"></script></head>';


echo 'Top node at (0,3)
<script type="text/tikz">
\begin{tikzpicture}
\coordinate (C) at (0,0);
\coordinate (B) at (0,3);
\coordinate (A) at (2,0);
\draw (A)--(B)--(C)--(A);
\begin{scope}
\clip (A)--(B)--(C)--(A);
\draw (0,0.5)--++(0.5,0)--++(0,-1)--++(-1,0)--++(0,1)--++(1,0);
\end{scope}
\end{tikzpicture}
</script>
<br><br>
';


echo 'Top node at (0,-3)
<script type="text/tikz">
\begin{tikzpicture}
\coordinate (C) at (0,0);
\coordinate (B) at (0,-3);
\coordinate (A) at (2,0);
\draw (A)--(B)--(C)--(A);
\begin{scope}
\clip (A)--(B)--(C)--(A);
\draw (0,0.5)--++(0.5,0)--++(0,-1)--++(-1,0)--++(0,1)--++(1,0);
\end{scope}
\end{tikzpicture}
</script>
';


?>

Solution 1:^[1]

You can use a cell template to accomplish this.

<DataGrid>
    <Column
        dataField="myValues"
        cellRender={renderGridCell}
    />
</DataGrid>

const renderGridCell = (cellData) => {
    return (
        // this is just an example. access the cellData parameter to get the values of your object
        [4995,4218,4445,4506,5145]
            .map(x => <span style={{ backgroundColor: x > 5000 ? 'red' : undefined }}>{x}</span>)
            .reduce((acc, x) => acc === null ? x : <>{acc}, {x}</>, null)
    );
}

Here is the cell data parameter description. You probably need to access cellData.value or cellData.data.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	marjay

'tikzjax badly clips when two pictures together

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]