Fatal编程技术网
  • svg/
  • SVG中的html内容

SVG中的html内容

svg

SVG中的html内容,svg,svg-animate,jquery-svg,svg.js,Svg,Svg Animate,Jquery Svg,Svg.js,我试图在svg代码中使用html内容，但由于某些原因，svg无法识别此代码。 html代码作为独立代码运行良好。但是，当我将这个html代码复制到SVG的标记中时，它就不起作用了。我用简单的html尝试了这个foreigntag对象，效果很好 是否有任何特定的方式可以在svg中引用html <svg xmlns="http://www.w3.org/2000/svg" width="800" height="500"> <foreignObject class="n

我试图在svg代码中使用html内容，但由于某些原因，svg无法识别此代码。 html代码作为独立代码运行良好。但是，当我将这个html代码复制到SVG的标记中时，它就不起作用了。我用简单的html尝试了这个foreigntag对象，效果很好

是否有任何特定的方式可以在svg中引用html

    <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>


.马克{
背景色：rgba（255,0,0,8）；
边界半径：50%；
高度：80px；
左：2px；
位置：绝对位置；
顶部：45px；
宽度：80px；
动画：markPulse.5s舒缓无限；
}
@关键帧标记脉冲{
0% {
不透明度：0；
变换：缩放（0,0）；
}
50% {
不透明度：1；
变换：比例（1,1）；
}
100% {
变换：缩放（0,0）；
}
}
OmniGraffle 7.5制作
2017-10-13 20:45:46 +0000
画布1
第一层
32
解决方案不是尝试在
中包装HTML页面。您应该从HTML中提取
，并将其作为独立文件

但是，要使动画正常工作，需要将
部分从HTML移到SVG。此外，还需要修改动画，使其使用SVG元素，而不是
。我带了一个


OmniGraffle 7.5制作
2017-10-13 20:45:46 +0000
.马克{
填充：rgba（255,0,0,8）；
动画：markPulse.5s舒缓无限；
}
@关键帧标记脉冲{
0% {
不透明度：0；
变换：缩放（0,0）；
}
50% {
不透明度：1；
变换：比例（1,1）；
}
100% {
变换：缩放（0,0）；
}
}
画布1
第一层
32
使用单个元素创建SVG文件的目的是什么？为什么不干脆有一个
.html
文件呢？在SVG中有一个HTML，在SVG中有一个SVG。在任何情况下，SVG在大多数情况下都适用于我。“SVG无法识别此代码”的确切含义是什么？除了另一个SVG之外，在foreignObject中没有任何其他内容。您是否将SVG用作外部文件？你是怎么用的？请提供有关您正在尝试执行的操作的更多信息。请提供一个。嗨，Paul，我收到了一个html文件中的动画（具有SVG+CSS），我希望在html文件中使用类似SVG文件的动画，因为我的应用程序只支持SVG格式。因此，我尝试使用foreignobject作为包装器，使整个内容看起来像一个SVG文件。如果在我上面的示例中去掉foreignobject标记内的内容，它将作为一个单独的html文件工作。这会对你有帮助。为什么要将html和css复制粘贴到svg中，而你可以同样轻松地将css复制粘贴到css文件中？……你太棒了……代码工作得很有魅力……到目前为止，我从未在论坛上自信地发布过问题……但你的回复却恰恰相反……对你来说……你好@Paul LeBeau。请让我知道如何将html CSS代码更改为SVG CSS代码，就像您在上面所做的那样。您是否有任何术语表或网站为CSS代码提供了相应的SVG代码。您是指
的CSS，标记
？如果您想了解SVG使用的CSS属性，我建议您阅读一些web上的SVG教程，或者。