html content inside a SVG

Question

i am trying to use a html content inside a svg code and for some reason SVG doesnt recognize this code. The html code works fine as a standalone. but when i copy this html code inside the SVG's tag it doesnt work. i have tried this foreigntag object with simple html and it works fine.

is there any specific way that i can reference the html inside the svg.

    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="500">
  <foreignObject class="node" x="46" y="22" width="800" height="500">
<html><head>  
      <style>


.mark {
  background-color: rgba(255, 0, 0, .8);
  border-radius: 50%;
  height: 80px;
  left: 2px;
  position: absolute;
  top: 45px;
  width: 80px;
  animation: markPulse .5s ease-out infinite;
}

@keyframes markPulse {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
   transform: scale(0, 0); 
  }
}
    </style>





</head>

<body translate="no">

  <div class="california-map">
  <div class="mark"></div>

  <path fill="#dbdbda" d="M 337.96043 197.46675 C 333.96043 197.5751 331.16043 198.44183 328.66043 199.74195 C 326.06043 207.75933 322.86043 204.29236 322.76043 204.29236 C 320.76043 206.45922 319.46043 208.9511 318.86043 211.00962 C 317.16043 216.53512 319.26043 225.52759 319.26043 225.52759 L 319.26043 236.47023 C 319.26043 236.47023 318.16043 236.57857 316.46043 237.77035 C 314.76043 238.96212 315.66043 241.34566 315.66043 241.34566 L 319.06043 240.37058 C 319.06043 240.37058 319.16043 255.97197 318.16043 267.8897 C 317.16043 279.80743 320.06043 288.69156 320.76043 292.15853 C 321.46043 295.6255 322.76043 295.8422 327.46043 296.8173 C 331.36043 297.5757 336.46043 297.68403 337.96043 297.68403 C 339.46043 297.68403 344.56043 297.68403 348.46043 296.92563 C 353.16043 296.05888 354.46043 295.73385 355.16043 292.26688 C 355.96043 288.7999 358.86043 279.91577 357.86043 267.99804 C 356.86043 256.0803 357.06043 240.47892 357.06043 240.47892 L 360.46043 241.454 C 360.46043 241.454 361.46043 239.07046 359.76043 237.8787 C 358.06043 236.68692 356.96043 236.57857 356.96043 236.57857 L 356.96043 225.63593 C 356.96043 225.63593 359.16043 216.7518 357.36043 211.11797 C 356.76043 209.05945 355.46043 206.6759 353.66043 204.50904 C 352.96043 205.05076 350.36043 206.78425 348.16043 200.06698 C 345.56043 198.65852 342.76043 197.68343 338.76043 197.5751 C 338.76043 197.5751 338.46043 197.5751 338.26043 197.5751 C 338.26043 197.46675 337.96043 197.46675 337.96043 197.46675 Z M 321.46043 237.8787 C 321.46043 237.8787 325.46043 241.12898 325.36043 256.18866 C 325.36043 271.24833 321.36043 276.2321 321.36043 276.2321 Z M 348.66043 277.85726 C 348.56043 279.15737 348.26043 282.7327 347.76043 285.22458 C 347.26043 287.71647 341.96043 290.1 337.96043 290.20836 L 337.46043 290.20836 C 337.46043 290.20836 337.96043 290.20836 336.96043 290.20836 C 332.96043 290.1 327.76043 287.71647 327.26043 285.22458 C 326.76043 282.62435 326.46043 279.04903 326.36043 277.7489 C 326.26043 276.4488 326.46043 274.1736 329.16043 274.1736 C 331.46043 274.1736 335.76043 274.1736 337.26043 274.1736 C 337.66043 274.1736 337.86043 274.1736 337.86043 274.1736 C 339.36043 274.1736 343.66043 274.1736 345.86043 274.1736 C 348.66043 274.1736 348.76043 276.55714 348.66043 277.85726 Z M 354.56043 276.34046 C 354.56043 276.34046 350.56043 271.35668 350.66043 256.297 C 350.66043 241.23732 354.66043 237.98703 354.66043 237.98703 Z M 337.96043 222.819 C 347.16043 222.819 350.96043 226.71936 352.16043 229.1029 C 353.46043 231.48645 351.76043 237.8787 351.26043 239.9372 C 350.86043 241.88738 348.76043 242.64578 346.96043 242.64578 C 345.66043 242.64578 340.96043 242.64578 338.56043 242.64578 C 338.56043 242.64578 337.96043 242.64578 337.16043 242.64578 C 334.76043 242.64578 330.06043 242.64578 328.76043 242.64578 C 326.96043 242.64578 324.86043 241.99572 324.46043 239.9372 C 324.06043 237.98703 322.36043 231.5948 323.66043 229.1029 C 324.96043 226.61102 328.76043 222.819 337.96043 222.819 L 337.96043 223.14404 Z">

</path></div>


<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="312.8 196.6 50.387196 101.08402" width="50.387196pt" height="101.08402pt" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <metadata> Produced by OmniGraffle 7.5 
    <dc:date>2017-10-13 20:45:46 +0000</dc:date>
  </metadata>
  <defs>
    <lineargradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="yellow"></stop>
      <stop offset="1" stop-color="black" stop-opacity="0"></stop>
    </lineargradient>
    <lineargradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(337.9 217.6) rotate(90) scale(73.26891)"></lineargradient>
    <radialgradient cx="0" cy="0" r="1" id="Gradient_2" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="yellow" stop-opacity="0"></stop>
      <stop offset="1" stop-color="#fffc00"></stop>
    </radialgradient>
    <radialgradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(324.4936 210.86891) rotate(77) scale(15.139587)"></radialgradient>
    <radialgradient id="Obj_Gradient_3" xl:href="#Gradient_2" gradientTransform="translate(351.4936 210.86891) rotate(103) scale(15.139587)"></radialgradient>
    <font-face font-family="Helvetica Neue" font-size="15" panose-1="2 0 8 3 0 0 0 9 0 4" units-per-em="1000" underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714" ascent="975.0061" descent="-216.99524" font-weight="bold">
      <font-face-src>
        <font-face-name name="HelveticaNeue-Bold"></font-face-name>
      </font-face-src>
    </font-face>
  </defs>
  <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1">
    <title>Canvas 1</title>
    <g>
      <title>Layer 1</title>
      <rect x="320.8" y="217.6" width="34.2" height="73.26891" fill="url(#Obj_Gradient)"></rect>
      <path d="M 330.78838 197.1 L 327.193 222.56136 L 312.8 201.25295 Z" fill="url(#Obj_Gradient_2)"></path>
      <path d="M 363.1872 201.25295 L 348.7942 222.56136 L 345.19883 197.1 Z" fill="url(#Obj_Gradient_3)"></path>
      <path d="M 337.96043 197.46675 C 333.96043 197.5751 331.16043 198.44183 328.66043 199.74195 C 326.06043 207.75933 322.86043 204.29236 322.76043 204.29236 C 320.76043 206.45922 319.46043 208.9511 318.86043 211.00962 C 317.16043 216.53512 319.26043 225.52759 319.26043 225.52759 L 319.26043 236.47023 C 319.26043 236.47023 318.16043 236.57857 316.46043 237.77035 C 314.76043 238.96212 315.66043 241.34566 315.66043 241.34566 L 319.06043 240.37058 C 319.06043 240.37058 319.16043 255.97197 318.16043 267.8897 C 317.16043 279.80743 320.06043 288.69156 320.76043 292.15853 C 321.46043 295.6255 322.76043 295.8422 327.46043 296.8173 C 331.36043 297.5757 336.46043 297.68403 337.96043 297.68403 C 339.46043 297.68403 344.56043 297.68403 348.46043 296.92563 C 353.16043 296.05888 354.46043 295.73385 355.16043 292.26688 C 355.96043 288.7999 358.86043 279.91577 357.86043 267.99804 C 356.86043 256.0803 357.06043 240.47892 357.06043 240.47892 L 360.46043 241.454 C 360.46043 241.454 361.46043 239.07046 359.76043 237.8787 C 358.06043 236.68692 356.96043 236.57857 356.96043 236.57857 L 356.96043 225.63593 C 356.96043 225.63593 359.16043 216.7518 357.36043 211.11797 C 356.76043 209.05945 355.46043 206.6759 353.66043 204.50904 C 352.96043 205.05076 350.36043 206.78425 348.16043 200.06698 C 345.56043 198.65852 342.76043 197.68343 338.76043 197.5751 C 338.76043 197.5751 338.46043 197.5751 338.26043 197.5751 C 338.26043 197.46675 337.96043 197.46675 337.96043 197.46675 Z M 321.46043 237.8787 C 321.46043 237.8787 325.46043 241.12898 325.36043 256.18866 C 325.36043 271.24833 321.36043 276.2321 321.36043 276.2321 Z M 348.66043 277.85726 C 348.56043 279.15737 348.26043 282.7327 347.76043 285.22458 C 347.26043 287.71647 341.96043 290.1 337.96043 290.20836 L 337.46043 290.20836 C 337.46043 290.20836 337.96043 290.20836 336.96043 290.20836 C 332.96043 290.1 327.76043 287.71647 327.26043 285.22458 C 326.76043 282.62435 326.46043 279.04903 326.36043 277.7489 C 326.26043 276.4488 326.46043 274.1736 329.16043 274.1736 C 331.46043 274.1736 335.76043 274.1736 337.26043 274.1736 C 337.66043 274.1736 337.86043 274.1736 337.86043 274.1736 C 339.36043 274.1736 343.66043 274.1736 345.86043 274.1736 C 348.66043 274.1736 348.76043 276.55714 348.66043 277.85726 Z M 354.56043 276.34046 C 354.56043 276.34046 350.56043 271.35668 350.66043 256.297 C 350.66043 241.23732 354.66043 237.98703 354.66043 237.98703 Z M 337.96043 222.819 C 347.16043 222.819 350.96043 226.71936 352.16043 229.1029 C 353.46043 231.48645 351.76043 237.8787 351.26043 239.9372 C 350.86043 241.88738 348.76043 242.64578 346.96043 242.64578 C 345.66043 242.64578 340.96043 242.64578 338.56043 242.64578 C 338.56043 242.64578 337.96043 242.64578 337.16043 242.64578 C 334.76043 242.64578 330.06043 242.64578 328.76043 242.64578 C 326.96043 242.64578 324.86043 241.99572 324.46043 239.9372 C 324.06043 237.98703 322.36043 231.5948 323.66043 229.1029 C 324.96043 226.61102 328.76043 222.819 337.96043 222.819 L 337.96043 223.14404 Z" fill="#005493"></path>
      <path d="M 328.4875 199.56588 L 338.0875 196.6 L 347.6875 199.56588 Z" fill="red"></path>
      <text transform="translate(329.2665 204.715)" fill="white">
        <tspan font-family="Helvetica Neue" font-size="15" font-weight="bold" fill="white" x=".526045" y="15" textLength="16.68">32</tspan>
      </text>
      <ellipse cx="337.9936" cy="255.4" rx="6.40001" ry="5.600009" fill="red"></ellipse>
    </g>
  </g>
</svg>

 </body></html>

  </foreignObject>
</svg>

What is the purpose of having an SVG file with a single `` element? Why not just have an `.html` file? You've got an SVG inside an HTML inside an SVG. In any case, the SVG mostly works for me in [JSFiddle](http://jsfiddle.net/m9fehdwt/). What does "SVG doesnt recognize this code" mean exactly? You really don't have anything inside the foreignObject other than another SVG. Are you using the SVG as an external file? How are you using it? Please provide more information on what you are trying to do. — Paul LeBeau, Oct 26 '17 at 00:41
Hi Paul, i received a animation in a html file(having SVG+CSS) and i want to use the animation inside the html file as such like a SVG file as my application only supports SVG format. so i am trying to use the foreignobject as a wrapper and make the entire thing look like a SVG file. if you strip the contents inside the foreignobject tag in my above example will work as an individual html file. will that help you. — vinodhkumar ramamoorthy, Oct 26 '17 at 13:07
Why copy-paste the html and css into the svg, when you could just as easily copy-paste the css out to a css file? — skylize, Nov 18 '17 at 02:34

score 0 · Answer 1 · answered Oct 26 '17 at 13:56

The solution was not to try and wrap your HTML page in a <foreignObject>. You should just extract the <svg> from your HTML and make it a standalone file.

However, for the animation to work, you'll need to move the <style> section from the HTML to your SVG. Plus you'll need to modify the animation so that it uses an SVG element, rather than a <div>. I've gone with a <circle>.

<?xml version="1.0" encoding="utf-8"?>
<!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" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="312.8 196.6 50.387196 101.08402" width="50.387196pt" height="101.08402pt" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <metadata> Produced by OmniGraffle 7.5 
    <dc:date>2017-10-13 20:45:46 +0000</dc:date>
  </metadata>
  <style>
.mark {
  fill: rgba(255, 0, 0, .8);
  animation: markPulse .5s ease-out infinite;
}

@keyframes markPulse {
  0% {
    opacity: 0;
    transform: scale(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1, 1);
  }
  100% {
   transform: scale(0, 0); 
  }
}
  </style>
  <defs>
    <lineargradient x1="0" x2="1" id="Gradient" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="yellow"></stop>
      <stop offset="1" stop-color="black" stop-opacity="0"></stop>
    </lineargradient>
    <lineargradient id="Obj_Gradient" xl:href="#Gradient" gradientTransform="translate(337.9 217.6) rotate(90) scale(73.26891)"></lineargradient>
    <radialgradient cx="0" cy="0" r="1" id="Gradient_2" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="yellow" stop-opacity="0"></stop>
      <stop offset="1" stop-color="#fffc00"></stop>
    </radialgradient>
    <radialgradient id="Obj_Gradient_2" xl:href="#Gradient_2" gradientTransform="translate(324.4936 210.86891) rotate(77) scale(15.139587)"></radialgradient>
    <radialgradient id="Obj_Gradient_3" xl:href="#Gradient_2" gradientTransform="translate(351.4936 210.86891) rotate(103) scale(15.139587)"></radialgradient>
    <font-face font-family="Helvetica Neue" font-size="15" panose-1="2 0 8 3 0 0 0 9 0 4" units-per-em="1000" underline-position="-100" underline-thickness="50" slope="0" x-height="517" cap-height="714" ascent="975.0061" descent="-216.99524" font-weight="bold">
      <font-face-src>
        <font-face-name name="HelveticaNeue-Bold"></font-face-name>
      </font-face-src>
    </font-face>
  </defs>
  <g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1">
    <title>Canvas 1</title>
    <g>
      <title>Layer 1</title>
      <rect x="320.8" y="217.6" width="34.2" height="73.26891" fill="url(#Obj_Gradient)"></rect>
      <path d="M 330.78838 197.1 L 327.193 222.56136 L 312.8 201.25295 Z" fill="url(#Obj_Gradient_2)"></path>
      <path d="M 363.1872 201.25295 L 348.7942 222.56136 L 345.19883 197.1 Z" fill="url(#Obj_Gradient_3)"></path>
      <path d="M 337.96043 197.46675 C 333.96043 197.5751 331.16043 198.44183 328.66043 199.74195 C 326.06043 207.75933 322.86043 204.29236 322.76043 204.29236 C 320.76043 206.45922 319.46043 208.9511 318.86043 211.00962 C 317.16043 216.53512 319.26043 225.52759 319.26043 225.52759 L 319.26043 236.47023 C 319.26043 236.47023 318.16043 236.57857 316.46043 237.77035 C 314.76043 238.96212 315.66043 241.34566 315.66043 241.34566 L 319.06043 240.37058 C 319.06043 240.37058 319.16043 255.97197 318.16043 267.8897 C 317.16043 279.80743 320.06043 288.69156 320.76043 292.15853 C 321.46043 295.6255 322.76043 295.8422 327.46043 296.8173 C 331.36043 297.5757 336.46043 297.68403 337.96043 297.68403 C 339.46043 297.68403 344.56043 297.68403 348.46043 296.92563 C 353.16043 296.05888 354.46043 295.73385 355.16043 292.26688 C 355.96043 288.7999 358.86043 279.91577 357.86043 267.99804 C 356.86043 256.0803 357.06043 240.47892 357.06043 240.47892 L 360.46043 241.454 C 360.46043 241.454 361.46043 239.07046 359.76043 237.8787 C 358.06043 236.68692 356.96043 236.57857 356.96043 236.57857 L 356.96043 225.63593 C 356.96043 225.63593 359.16043 216.7518 357.36043 211.11797 C 356.76043 209.05945 355.46043 206.6759 353.66043 204.50904 C 352.96043 205.05076 350.36043 206.78425 348.16043 200.06698 C 345.56043 198.65852 342.76043 197.68343 338.76043 197.5751 C 338.76043 197.5751 338.46043 197.5751 338.26043 197.5751 C 338.26043 197.46675 337.96043 197.46675 337.96043 197.46675 Z M 321.46043 237.8787 C 321.46043 237.8787 325.46043 241.12898 325.36043 256.18866 C 325.36043 271.24833 321.36043 276.2321 321.36043 276.2321 Z M 348.66043 277.85726 C 348.56043 279.15737 348.26043 282.7327 347.76043 285.22458 C 347.26043 287.71647 341.96043 290.1 337.96043 290.20836 L 337.46043 290.20836 C 337.46043 290.20836 337.96043 290.20836 336.96043 290.20836 C 332.96043 290.1 327.76043 287.71647 327.26043 285.22458 C 326.76043 282.62435 326.46043 279.04903 326.36043 277.7489 C 326.26043 276.4488 326.46043 274.1736 329.16043 274.1736 C 331.46043 274.1736 335.76043 274.1736 337.26043 274.1736 C 337.66043 274.1736 337.86043 274.1736 337.86043 274.1736 C 339.36043 274.1736 343.66043 274.1736 345.86043 274.1736 C 348.66043 274.1736 348.76043 276.55714 348.66043 277.85726 Z M 354.56043 276.34046 C 354.56043 276.34046 350.56043 271.35668 350.66043 256.297 C 350.66043 241.23732 354.66043 237.98703 354.66043 237.98703 Z M 337.96043 222.819 C 347.16043 222.819 350.96043 226.71936 352.16043 229.1029 C 353.46043 231.48645 351.76043 237.8787 351.26043 239.9372 C 350.86043 241.88738 348.76043 242.64578 346.96043 242.64578 C 345.66043 242.64578 340.96043 242.64578 338.56043 242.64578 C 338.56043 242.64578 337.96043 242.64578 337.16043 242.64578 C 334.76043 242.64578 330.06043 242.64578 328.76043 242.64578 C 326.96043 242.64578 324.86043 241.99572 324.46043 239.9372 C 324.06043 237.98703 322.36043 231.5948 323.66043 229.1029 C 324.96043 226.61102 328.76043 222.819 337.96043 222.819 L 337.96043 223.14404 Z" fill="#005493"></path>
      <path d="M 328.4875 199.56588 L 338.0875 196.6 L 347.6875 199.56588 Z" fill="red"></path>
      <text transform="translate(329.2665 204.715)" fill="white">
        <tspan font-family="Helvetica Neue" font-size="15" font-weight="bold" fill="white" x=".526045" y="15" textLength="16.68">32</tspan>
      </text>
      <ellipse cx="337.9936" cy="255.4" rx="6.40001" ry="5.600009" fill="red"></ellipse>
      <g transform="translate(337.9936, 255.4)">
        <circle class="mark" cx="0" cy="0" r="40"/>
      </g>
    </g>
  </g>
</svg>

...you are awesome....code worked like a charm...till date i never post quesions in forums with confidence....but your reply makes it opposite...kudos to you... — vinodhkumar ramamoorthy, Oct 27 '17 at 19:58
Hello @Paul LeBeau. pls let me know how do i change the html CSS code to a SVG css code as you did above. do you have any glossary or website which gives the corresponding SVG code for an CSS code. — vinodhkumar ramamoorthy, Oct 30 '17 at 22:01
Are you referring to the CSS for `,mark`? If you want to find out about the CSS properties that SVG uses, I would recommend reading some SVG tutorials on the web, or [the SVG specification](https://www.w3.org/TR/SVG/single-page.html). — Paul LeBeau, Oct 31 '17 at 00:52

html content inside a SVG

1 Answers1