SVG内のhtmlコンテンツ

-1

私はsvgコード内でHTMLコンテンツを使用しようとしています。何らかの理由でSVGがこのコードを認識しません。 htmlコードはスタンドアロンとして正常に動作します。しかし、このHTMLコードをSVGのタグの中にコピーすると、それはうまく動作しません。私は単純なhtmlでこのforeigntagオブジェクトを試して、うまくいきます。SVG内のhtmlコンテンツ

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

出典

2017-10-25 vinodhkumar ramamoorthy

？単に '.html'ファイルを持っていないのはなぜですか？あなたはSVG内のHTML内にSVGを持っています。いずれにしても、SVGは主に[JSFiddle]（http://jsfiddle.net/m9fehdwt/）で動作します。「SVGがこのコードを認識しない」とはどういう意味ですか？あなたは本当に別のSVG以外のforeignObjectの中に何も持っていません。 SVGを外部ファイルとして使用していますか？どうやって使ってるの？あなたがしようとしていることについてさらに情報を提供してください。 –

[mcve]を入力してください。 –

こんにちはPaul、私は（SVG + CSSを持っている）htmlファイルでアニメーションを受け取りました。私のアプリケーションはSVG形式しかサポートしていないので、SVGファイルのようにhtmlファイルの中でアニメーションを使いたいです。だから私は、外国人オブジェクトをラッパーとして使用し、全体をSVGファイルのように見せようとしています。上の例でforeignobjectタグ内のコンテンツを取り除くと、個々のhtmlファイルとして機能します。それがあなたを助けます。 –

解決策は、<foreignObject>でHTMLページを試してラップすることではありませんでした。 HTMLから<svg>を抽出してスタンドアロンファイルにするだけです。

しかし、アニメーションを機能させるには、<style>セクションをHTMLからSVGに移動する必要があります。さらに、<div>ではなく、SVG要素を使用するようにアニメーションを変更する必要があります。私は<circle>と一緒に行った。単一 `<のforeignObject>`要素とSVGファイルを持つことの目的は何

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

出典

2017-10-26 13:56:59

...あなたは素晴らしいです....コードは魅力のように働いていました。日付まで自信を持ってフォーラムで質問を投稿することはありません....しかしあなたの返事はそれとは反対です...あなたに敬意を表します... –

こんにちは@ Paul LeBeau。 plsは、あなたが上記のようにHTML CSSコードをSVG CSSコードに変更する方法を教えてくれます。あなたはCSSコードのための対応するSVGコードを与える任意の用語集またはウェブサイトを持っていますか？ –

'、mark'のCSSを参照していますか？ SVGが使用するCSSプロパティについて知りたい場合は、Web上のSVGチュートリアルや[SVG仕様]（https://www.w3.org/TR/SVG/single-page）を読むことをお勧めします。 html）。 –

SVG内のhtmlコンテンツ

答えて

関連する問題