【发布时间】：2018-04-07 03:32:18
【问题描述】：
我正在尝试在 svg 代码中使用 html 内容，但出于某种原因 SVG 无法识别此代码。 html代码作为独立的工作正常。但是当我在 SVG 的标签中复制这个 html 代码时它不起作用。我已经用简单的 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>
【问题讨论】：
-
拥有一个带有单个
<foreignObject>元素的 SVG 文件的目的是什么？为什么不只是有一个.html文件？您在 SVG 内的 HTML 内有一个 SVG。无论如何，SVG 在JSFiddle 中最适合我。 “SVG 无法识别此代码”到底是什么意思？除了另一个 SVG 之外，你在 foreignObject 中真的没有任何东西。您是否将 SVG 用作外部文件？你如何使用它？请提供更多信息，说明您正在尝试做什么。 -
嗨，Paul，我收到了一个 html 文件中的动画（具有 SVG+CSS），我想使用 html 文件中的动画，就像 SVG 文件一样，因为我的应用程序只支持 SVG 格式。所以我试图使用外来对象作为包装器，并使整个东西看起来像一个 SVG 文件。如果您在我上面的示例中剥离了 foreignobject 标记内的内容，它将作为一个单独的 html 文件工作。对你有帮助吗？
-
为什么要将 html 和 css 复制粘贴到 svg 中，而您可以轻松地将 css 复制粘贴到 css 文件中？
标签： svg svg-animate jquery-svg svg.js