You're welcome!
wrap.svg<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" viewBox="0 0 40 15" height="150">
<foreignObject x="0" y="0" height="15" width="200">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
div {
background-color:white;
font-size: 14px;
font-weight: bold;
font-family: "Noto Sans Mono CJK JP Bold";
line-height: 1em;
width:100%;height:100%;
transform-origin: top left;
transform: scale(0.32, 1);
}
</style>
<div>
You're welcome!
</div>
</html>
</foreignObject>
</svg>
y01.svg<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" viewBox="0 0 40 15" height="150">
<foreignObject x="0" y="0" height="15" width="200">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
div {
color: white; /* 白文字 */
background: linear-gradient( to right,
#333,
#777,
#FFF,
#777,
#333
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
animation-direction: reverse;
font-size: 14px;
font-weight: bold;
font-family: "Noto Sans Mono CJK JP Bold";
line-height: 1em;
width:100%;height:100%;
transform-origin: top left;
transform: scale(0.32, 1);
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
</style>
<div>
You're welcome!
</div>
</html>
</foreignObject>
</svg>