0

I have a php-file that sends an SVG header and draws itself partly with JavaScript. Everything works fine when I show the SVG directly in the browser. However, when I embed it in an <img>, then the JavaScript seems not to be executed. Maybe I am doing something wrong?

Here is the php-file (testsvg.php):

<?php
header('Content-type: image/svg+xml');
?>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 width="800"
 height="600"
 id="example_text">
    <g id="layer1">
        <text
         x="100"
         y="100"
         id="text_holder">
            <?php echo filter_input(INPUT_GET, 'text'); ?>
        </text>
    </g>
    <script type="text/javascript">

function create_from_rect (client_rect, offset_px) {
    if (! offset_px) {
        offset_px=0;
    }

    var box = document.createElementNS(
        document.rootElement.namespaceURI,
        'rect'
    );

    if (client_rect) {
        box.setAttribute('x', client_rect.left - offset_px);
        box.setAttribute('y', client_rect.top - offset_px);
        box.setAttribute('width', client_rect.width + offset_px * 2);
        box.setAttribute('height', client_rect.height + offset_px * 2);
    }

    return box;
}

function add_bounding_box (text_id, padding) {
    var text_elem = document.getElementById(text_id);
    if (text_elem) {
        var f = text_elem.getClientRects();
        if (f) {
            var bbox = create_from_rect(f[0], padding);
            bbox.setAttribute(
                'style',
                'fill: none;'+
                'stroke: black;'+
                'stroke-width: 0.5px;'
            );
            text_elem.parentNode.appendChild(bbox);
        }
    }
}

add_bounding_box('text_holder', 10);

</script>
</svg>

(The SVG/JavaScript is mostly taken from How can I draw a box around text with SVG?.)

When I open this file directly in the browser, e.g. with http://localhost/testsvg.php?text=Test it draws a proper box around the text Test.

However, when I embed it with an <img>, e.g. with <img src="testsvg.php?text=Test" alt="">, it does not show the box.

Community
  • 1
  • 1
Daniel
  • 3,383
  • 4
  • 30
  • 61

1 Answers1

0

To protect user's privacy, script is not run in images. There are other restrictions.

When thinking of an image it helps to have the mental model "could I do this if I used a raster image"? If you bear that in mind you won't go far wrong as that's basically the model the browsers implement.

Your alternatives are to use <object> or <iframe> tags instead of <img> as they do allow scripting.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • It seems very strange that the `` is not shown properly, but when I click on `View Image` it shows just fine. Well what can you do? That is very unfortunate, since by using `` or ` – Daniel Apr 09 '14 at 11:04
  • Best ask a new question for that so you can get proper answers. – Robert Longson Apr 09 '14 at 12:29