将SVG /图像代码放入< / style> [英] Placing SVG/Image code into </style>

问题描述

我试图弄清楚如何将这段代码放入< / style> 中，有人可以帮我解决这个问题。

我在想你能做什么，把它放到< / style> 中，然后我会看到我想保留在那里。

有人可以帮我做到这一点，下面的答案都没有帮助。

https://jsfiddle.net/sasyk9td/2/

< svg width =260height =194> < DEFS> < clippath id =circleView> < circle cx =130cy =97r =85fill =orange>< / circle> < / clippath> < / DEFS> < image x =40y =7width =180height =180xlink：href =https://i.imgur.com/BO6KOvw.jpgclip-path =url（＃ circleView）>< /图像> < image x =40y =7width =180height =180xlink：href =https://i.imgur.com/4HJbzEq.png>< / image><< ; / svg>

解决方案

造型可以通过3种方式发生。内置样式（使用< / style>< / li>）


外部样式（在html页面中创建外部样式表和链接）

您可以在< / style> 标签中添加可重复使用的样式，称为内部样式。最大优化可以在这里完成。请检查。

 < style> 
 svg {width：260px;身高：194; } 
 image {width：180px; height：180px; } 
< / style> 
 
< svg> 
< defs> 
< clippath id =circleView> 
< circle cx =130cy =97r =85fill =orange>< / circle> 
< / clippath> 
< / defs> 
< image x =40y =7xlink：href =https://i.imgur.com/BO6KOvw.jpgclip-path =url（#circleView）> 
< / image> 
< image x =40y =7xlink：href =https://i.imgur.com/4HJbzEq.png>< / image> 
< / svg> 
  

I'm trying to figure out how I would put this code into</style>, can someone help me with this.

I'm thinking what you could do is, put as much of it into </style> and then I'll see what I want to keep there.

Can someone help me do this, none of the answers below helped.

https://jsfiddle.net/sasyk9td/2/

<svg width="260" height="194">
  <defs>
    <clippath id="circleView">
      <circle cx="130" cy="97" r="85" fill="orange"></circle>
    </clippath>
  </defs>
  <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)"></image>
  <image x="40" y="7" width="180" height="180" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
</svg>

解决方案

styling can be happened in 3 ways.

1. inline styling
2. internal styling (usning </style> tab in head section)
3. external styling (create external style sheet ans link in html page)

You can put re-usable styles in </style> tag called internal styling. Maximum optimisation can be done here. please check.

<style>
   svg { width: 260px; height: 194; }
   image { width: 180px; height: 180px; }
</style>

<svg>
   <defs>
      <clippath id="circleView">
         <circle cx="130" cy="97" r="85" fill="orange"></circle>
      </clippath>
   </defs>
   <image x="40" y="7" xlink:href="https://i.imgur.com/BO6KOvw.jpg" clip-path="url(#circleView)">
   </image>
   <image x="40" y="7" xlink:href="https://i.imgur.com/4HJbzEq.png"></image>
</svg>

这篇关于将SVG /图像代码放入< / style>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！