Question about namespaces?

DJ_AM_Juicebox
DJ_AM_Juicebox used Ask the Experts™
on
Hi,

I'm trying to use "xlink:href" within an html document, but I'm not sure how to use this. I'm trying to display an <svg> element, here's my code:

<html>
<body>
    <svg
      width="800px"
      height="500px"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

      <ellipse cx="100" cy="100" rx="20">
         <animateMotion dur="40s" >
                <mpath xlink:href="#curve"/>   // <-- Problem
         </animateMotion>
      </ellipse>
  </svg>
</body>
</html>

yeah so my browser won't load the page, saying:

  XML self-closing tag syntax used on <mpath>. The tag will not be closed.

the <svg> element is originally taken from a .svg file, I want to put it into this .html file. What's the right way to reference it?

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Oh it looks like the error is telling me I can't use the shorthand close-tag notation. So this is an error:

  <mpath xlink:href="#curve"/>

but this parses fine:

  <mpath xlink:href="#curve"></mpath>

is there a way to tell the browser to expect the shorter-notation? Otherwise I have to always add these extra tags.

Thanks
There are some ways to have a SVG appear on a HTML page, but under the current standards+compatibilities I do not think it is possible to just insert a <svg>.....</svg> element inside a html/xhtml webpage.

That being said the current methods are documented on this page > http://www.w3schools.com/svg/svg_inhtml.asp , the last method on the page named "I Wish...." is what we all wish were possible.

For your question about the shorthand notation I really have no ideas about that one sorry.
The SVG spec requires rx and ry attributes for ellipse element. You are missing the ry attribute.

The following completed code works fine in XHTML file in latest Google Chrome Dev build:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
    <svg:svg 
      width="800px" 
      height="500px" 
      xmlns:svg="http://www.w3.org/2000/svg" 
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <svg:defs>
         <svg:path id="curve" d="M233 124 C304.796 124 363 152.43 363 187.5 C363 222.57 304.796 251 233 251 C228.612 251 228.302 251.051 222.245 251.139 C219.125 251.185 231.836 297.864 225.687 297.178 C219.539 296.491 194.799 248.512 183.438 246.222 C152.195 239.923 103 213.997 103 187.5 C103 152.43 161.204 124 233 124 z"></svg:path>
      </svg:defs>
      <svg:ellipse cx="100" cy="100" rx="20" ry="40" style="fill: black">
         <svg:animateMotion dur="40s" >
                <svg:mpath xlink:href="#curve"></svg:mpath>
         </svg:animateMotion>
      </svg:ellipse>
  </svg:svg>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial