I have PHP utility to create a graph in SVG based on data extracted from various sources (currently I test IoTool as that source). It is almost complete.

But there are some parts that need to be changed, if it is possible. And I am not sure if horizontal flipping is correct way how to do that. May it be that you suggest a different way.

All of them could be done by horizontal flipping of one layer, by transform="scale(1, -1) translate(0, -100)" applied on element <g>.

But my problem is, that this transformation moves affected layer out of original place (and so it is wrong visible). Code below is without that transformation. I beg our pardon for empty lines, I only copied that code from browser FF to this place. To limit length of code, example is from measurement that took less than one minute.

<svg xmlns="http://www.w3.rg/2000/svg" xmlns:link="http://www.w3.org/1999/xlink" width="232mm" height="200mm" viewbox="0 0 232 200">

        <!-- patterns start -->


                <pattern id="TenUnitsGrid" width="1" height="1" patternUnits="userSpaceOnUse">

                    <path d="M 1 0 L 0 0 0 1" style="fill: none; stroke-width: 0.25; stroke: #DFDFDF;">


                <pattern id="GraphPaper" width="10" height="10" patternUnits="userSpaceOnUse">

                    <rect width="10" height="10" style="fill: url(#TenUnitsGrid);">


                    <path d="M 10 0 L 0 0 0 10" style="fill: none; stroke-width: 0.5; stroke: #CFCFCF;">




        <!-- patterns end -->
        <!-- background start -->


                <rect x="0" y="0" width="232" height="200" style="fill: url(#GraphPaper);">



        <!-- background end -->
        <!-- vertical lines start -->

            <g style="stroke-width: 0.25; stroke: #AAAAAA;">

                <line x1="0" x2="0" y1="0" y2="200">



        <!-- vertical lines end -->
        <!-- horizontal lines start -->

            <g style="stroke-width: 0.25; stroke: #CCDDFF;">

                <line x1="0" x2="232" y1="200" y2="200">

                <line x1="0" x2="232" y1="100" y2="100">

                <line x1="0" x2="232" y1="0" y2="0">



        <!-- horizontal lines end -->
        <!-- texts start -->

            <g font-size="5" style="font-family: monospace; fill: #005959;">

                <text x="0" y="5">
                    Graph name:
                    <tspan id="LineName">RR interval</tspan>

                <text x="0" y="10">
                    From time:
                    <tspan id="StartTime">2017-11-30 23:59:44.729</tspan>

                <text x="0" y="15">
                    To time:
                    <tspan id="EndTime">2017-12-01 00:00:41.697</tspan>

                <text x="0" y="20">
                    Horizontal lines distance:

                <text x="0" y="25">
                    Vertical lines distance:

                <text x="0" y="30">
                    Minimum value:

                <text x="0" y="35">
                    Maximum value:

                <text x="0" y="40">
                    Time speed:

                <text x="0" y="45">



        <!-- texts end -->
        <!-- graph line start -->

            <g width="232" height="200" style="stroke-width: 0.25; stroke: #000000; fill: none;">

                <polyline points="0,180.332 3.816,178.7695 7.72,178.3789 11.82,178.9648 15.712,179.6484 19.82,178.0859 19.82,179.2578 23.708,182.6757 27.808,184.8242 31.7,183.6523 35.804,186.6797 35.804,188.5351 39.704,184.6289 43.8,184.0429 47.692,183.8476 51.796,184.2382 55.688,183.9453 55.688,184.6289 59.784,185.3125 63.68,185.5078 67.776,185.8984 67.776,188.0468 71.88,190 75.772,185.0195 79.876,183.75 83.772,184.2382 87.864,184.0429 87.864,181.6992 91.764,182.7734 95.864,186.3867 99.76,182.6757 103.856,183.0664 107.752,182.0898 111.848,180.7226 111.848,180.7226 115.748,179.7461 119.844,180.039 163.776,174.7656 175.812,173.3007 175.812,176.0351 179.708,14.3164 183.804,183.2617 187.704,180.332 191.8,177.3047 195.7,175.5468 199.796,174.9609 203.896,174.5703 207.796,173.4961 211.688,171.4453 215.98,170.664 219.684,171.4453 223.784,171.4453 227.872,169.3945 227.872,170.4687 231.776,173.1054">



        <!-- graph line end -->


I have plan to make grid also from vertical and horizontal lines. But I need horizontal lines painted from bottom border, not from top border as normally.

I thought that horizontal flip of whole layer can be solution, but it seems that it is wrong thought, or I do something wrong with that transformation.

And also, to graph would be correctly oriented (from bottom to top), currently I have to do a bit curious counting - that is hardly maintainable (generally it can be written as ImageHeight - (CurrentValue - MinValue) * Zoom - Margin where CurrentValue - MinValue decreases total height of graph to really needed space and Margin allows to see correctly those parts of graph that would touch border of image).


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.