PROSAGA码农传奇-html/HTML5-在<img>（或<object>）中请求SVG的一部分

）中请求SVG的一部分

作者: 谦成
发布时间: 2024-12-31 05:21:41 (1月前)
转自：

3 条回复

0#
回复此人
VIP | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您想要实现的是使用另一个内联SVG而不是一个最简单的方法 <code> <img> </code> 要么 <code> <object> </code> 标签： </p> <pre> <code> <svg style="width:200px;height:200px" viewBox="35 50 150 150"> <use xlink:href="myFile.svg#head" /> </svg> </code> </pre> <P> 你需要做的两件事是 </p> <UL> <LI> 该 <code> viewBox </code> ：要获得您想要的SVG部分，您必须确定路径的位置以及它具有的边界框。该 <code> <use> </code> element只关注您选择的元素是可见的，但它不能识别 <EM> 哪里 </EM> 在那个图像里面的元素是。 </LI> <LI> 所选元素的总体大小显示在。 SVG没有“自然尺寸的概念，你总是需要给出一个宽度和高度。然后将viewBox安装在该区域内。 </LI> </UL> </DIV>

编辑
1#
回复此人
polo | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 请看一下 <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg" rel="nofollow noreferrer"> 这个svg文件 </A> 在视图源中。在根svg内部还有2个其他的svg元素。这两个svg元素各有一个id，并且样式表明nestedsvg元素只有在可见时才可见 <code> :target </code> 。 </p> <pre class="lang-css prettyprint-override"> <code> svg > svg:not(:target) { display: none; } </code> </pre> <pre class="lang-html prettyprint-override"> <code> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px" viewBox="0 0 225 225"> <style type="text/css"> <![CDATA[ svg > svg:not(:target) { display: none; } ]]> </style> <desc> <g id="cat"> <path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,..."/> <path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,..."/> </g> </desc> <svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225"> <use xlink:href ="#cat" fill="black" /> </svg> <svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225"> <use xlink:href ="#cat" fill="red" /> </svg> </svg> </code> </pre> <P> 以下是如何使用其中一个svg元素作为图像或对象： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" width="200" /> <object width="200" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"></object> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论