在SVG中使用异物 [英] Use of foreignobject inside svg
问题描述
我正在尝试学习如何使用CSS为SVG设置动画.
I am trying to learn how to animate SVG using CSS.
这是我的新手，我正在擦洗互联网以获取资料.
I am new to this and I am scrubbing the internet to pick up material.
我的最终目标是生成一个.svg格式的自动svg，因为我上传该动画最终产品的程序仅接受.svg文件.
My end goal is to generate an automated svg in .svg format as the program where I upload this animated end product only accepts .svg file.
我最近在.html文件中遇到了以下代码
I have recently come across the code below in an .html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: cornsilk;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
@keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
@keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
</style>
</head>
<!--#D75A4A;-->
<body>
<div class="container">
<svg viewBox="0 0 50 50">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>
</body>
</html>
由于我无法使用.html，因此我尝试查看是否可以使用外来对象将div附加到svg内，以便仍可以使用css样式.我碰到了这篇文章( SVG内的HTML )，并将代码更改为以下内容.我已经意识到，像在初始代码中那样，通过CSS使用div进行动画制作要容易得多.
Since I can't use .html for my purpose, I tried to see if I can use a foreignobject to append the div inside svg so that I can still use the css styling. I came across this article (HTML inside SVG) and altered the code to the following. I have realized that it is little easier to animate using a div through CSS as it was done in the initial code.
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
background-color: blueviolet;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
@keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
@keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
</style>
<foreignobject class="box" x="0" y="0" width="1280" height="720">
<div class="container">
<svg viewBox="-10 -10 100 100">
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" /> </svg>
</div>
</foreignobject>
</svg>但是它根本不会以.svg格式呈现.但是，如果我将相同的代码放在< html>中，</html> 标记可以正常工作.我不确定自己在做错什么，或者我是否试图实现这是不可能的.
But it does not render at all in .svg format. But if I put the same code inside <html> </html> tag it works. I am not sure what I am doing wrong or whether I am trying to achieve which is not possible.
如果可以的话，请给我一些启发，对我有很大帮助.
If you can please shed me some insight would help me a lot.
谢谢.
顺便说一句，我从示例链接中看了以下部分，以查看它是否呈现为.svg文件.
By the way, from the example link I took the following portion to see if it renders as a .svg file and it does.
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<style>
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<div xmlns="http://www.w3.org/1999/xhtml">
TRY.
</div>
</foreignObject>
</svg>推荐答案
我已经评论过，您必须在svg元素内使用css样式，方法是将css规则放在如下块中:
As I've commented you have to use css styles inside the svg element by puting the css roules inside a block like so:
<style type="text/css">
<![CDATA[
/*styles*/
]]>
</style>
接下来是您的示例，其中包含svg元素中的css代码
Next comes your example with the css code inside the svg element
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: cornsilk;
}
.container {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container svg {
height: 50vh;
border: 1px solid;
padding: 10px;
}
.heart {
fill: #D75A4A;
stroke: #fff;
animation: stroke-anim 2s infinite alternate, heart-scaling 2s infinite alternate, heart-fill 3s infinite alternate;
transform-origin: 50%;
transition: all 0.5s;
}
@keyframes stroke-anim {
0% {
stroke-dasharray: 157px 157px;
stroke-dashoffset: 157px;
}
100% {
stroke-dashoffset: 0px;
stroke-dasharray: 5px 2px;
}
}
@keyframes heart-scaling {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
@keyframes heart-fill {
0% {
fill: Aquamarine;
}
25% {
fill: Brown;
}
50% {
fill: DarkGrey;
}
75% {
fill: DarkOrange;
}
100% {
fill: DarkTurquoise;
}
}
]]>
</style>
<path class="heart" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z" />
</svg>这篇关于在SVG中使用异物的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
