CODEWITHSUNDEEP
htmlsvgsymbols
viskii420
viskii420

Reputation: 11

HTML in SVG as SVG

Recently started working with html in SVG. The code works fine FireFox but Chrome does not display the div content.

Can you please help me sort this issue. Here is a sample code that should show div content as "MY DIV" and an Airport symbol.

The code is saved as my_div.svg

Thanks in advance.

        <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"   viewport-fill="red">
        <defs>  
            <!-- My div -->
            <symbol id="my_div" viewBox="0 0 50 50" >
                <foreignObject x="0" y="0" width="50" height="50" fill="red">
                    <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50">
                        <div>MY DIV</div>
                    </body>
                </foreignObject>
            </symbol>

            <!-- Airport Symbol -->
            <symbol id="airport" viewBox="0 0 10 10">
                <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/>
            </symbol>

        </defs>

      <g fill="red"  transform="scale(18)"  >

          <g transform="translate(0, 0)">
            <use xlink:href="#my_div" width="5" height="5"/>
          </g>

          <g id="demo" transform="translate(0, 0)">
          <use xlink:href="#airport" x="10" y="0" width="5" height="5"/>
        </g>

     </g>
    </svg>

Upvotes: 1

Views: 351

Answers (3)

AmeliaBR
AmeliaBR

Reputation: 27544

The SVG specs do not allow <foreignObject> content to be directly re-used with a <use> element. The browsers have differed in their implementation of whether or not they allow you to <use> content that includes a <foreignObject> child--it isn't expressly forbidden by the specs, but it's somewhat circumventing the intent.

Firefox's implementation of <use> is basically a hidden clone of all the DOM elements, so they don't have any problem with cloning any type of content. However, other browsers more strongly link the source and copy graphics, and don't have any copying mechanism for foreignObjects.

Upvotes: 1

Marcel B&#246;ttcher
Marcel B&#246;ttcher

Reputation: 185

I know it does not solve that error, but I would recommend using SVG without mixing HTML via foreignObject into it. Lags support from IE and could be solved as well with and svg elements. You can use css to style it like your text in the div box.

Example: http://www.w3schools.com/svg/svg_text.asp

Upvotes: 0

Ryan Hollingsworth
Ryan Hollingsworth

Reputation: 381

Saved your code that you put here as an SVG and I received this:

This page contains the following errors:

error on line 1 at column 6: XML declaration allowed only at the start of the document Below is a rendering of the page up to the first error.

I fixed it by simply deleting the first line of code you provided.

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"   viewport-fill="red">
        <defs>  
            <!-- My div -->
            <symbol id="my_div" viewBox="0 0 50 50" >
                <foreignObject x="0" y="0" width="50" height="50" fill="red">
                    <body xmlns="http://www.w3.org/1999/xhtml" style="background:none transparent;" width="50" height="50">
                        <div>MY DIV</div>
                    </body>
                </foreignObject>
            </symbol>

            <!-- Airport Symbol -->
            <symbol id="airport" viewBox="0 0 10 10">
                <path d="M 9.2,5 C 9.2,4.5 9.8,3.2 10,3 L 9,3 L 8,4 L 5.5,4 L 8,0 L 6,0 L 3,4 C 2,4 1,4.2 0.5,4.5 C 0,5 0,5 0.5,5.5 C 1,5.8 2,6 3,6 L 6,10 L 8,10 L 5.5,6 L 7.8,6 L 9,7 L 10,7 C 9.8,6.8 9.2,5.5 9.2,5 z "/>
            </symbol>

        </defs>

      <g fill="red"  transform="scale(18)"  >

          <g transform="translate(0, 0)">
            <use xlink:href="#my_div" width="5" height="5"/>
          </g>

          <g id="demo" transform="translate(0, 0)">
          <use xlink:href="#airport" x="10" y="0" width="5" height="5"/>
        </g>

     </g>
    </svg>

This worked in Chrome for me, (mac)

Upvotes: 0

Related Questions