以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XQuery/XLink/XPointer/ 』  (http://bbs.xml.org.cn/list.asp?boardid=14)
----  [转帖]xlink应用篇之svg  (http://bbs.xml.org.cn/dispbbs.asp?boardid=14&rootid=&id=7010)


--  作者:faly
--  发布时间:4/25/2004 11:16:00 PM

--  [转帖]xlink应用篇之svg
1.
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="420" height="340" viewBox="0 0 420 340">
  <desc>视频例子</desc>
    <g>
    <circle cx="0" cy="0" r="170" fill="#da4" fill-opacity="0.3"/>
    <video xlink:href="noonoo.avi"
volume=".8" type="video/x-msvideo"
         width="320" height="240" x="50" y="50" repeatCount="indefinite"/>
    <circle cx="420" cy="340" r="170" fill="#927" fill-opacity="0.3"/>
    <rect x="1" y="1" width="418" height="338" fill="none"
       stroke="#777" stroke-width="1"/>
    </g>
</svg>


--  作者:faly
--  发布时间:4/25/2004 11:24:00 PM

--  
2.
效果图:结合代码不难看出,这副图片应该是有几幅小图组成
这应该属于:xlink可以链接外部资源的说法……
按此在新窗口浏览图片
<?xml version="1.0" encoding="iso-8859-1"?>
  
<svg version="1.2" width="252pt" height="162pt" viewBox="0 0 252 162" xml:space="preserve">
  <style type="text/css">
    <![CDATA[
      .trans{opacity:0.3;}
      .sta{fill:url(#grda);}
      .stb{fill:url(#grdb);}
      .stc{fill:url(#grdc);}
    ]]>
  </style>
  <defs>
    <linearGradient id="grda" gradientUnits="userSpaceOnUse" x1="2" y1="53" x2="46" y2="9">
      <stop  offset="0" style="stop-color:#C98A3E"/>
      <stop  offset="1" style="stop-color:#FFE58F"/>
    </linearGradient>
    <linearGradient id="grdb" gradientUnits="userSpaceOnUse" x1="125" y1="38" x2="81" y2="82">
      <stop  offset="0" style="stop-color:#C98A3E"/>
      <stop  offset="1" style="stop-color:#FFE58F"/>
    </linearGradient>
    <linearGradient id="grdc" gradientUnits="userSpaceOnUse" x1="129" y1="67" x2="172" y2="23">
      <stop  offset="0" style="stop-color:#381E94"/>
      <stop  offset="1" style="stop-color:#99DCFF"/>
    </linearGradient>
  </defs>
  <image id="background" width="252" height="162" xlink:href="over_bg.png" />
  <image id="f" width="42" height="53" xlink:href="pinacle.png" transform="matrix(1 0 0 1 98 88)"/>
  <image id="e" width="95" height="53" xlink:href="coast.png" transform="matrix(1 0 0 1 6 88)"/>
  <use x="105" xlink:href="#f" />
  <use x="143" xlink:href="#e" />
  <g id="a">
    <path class="trans" d="M14.3,22.5h44l-44,44v-44z"/>
    <path class="sta" d="M13,20.2h44l-44,44v-44z"/>
  </g>
  <g id="b">
    <path class="trans" d="M116.3,72.5h-44l44-44v44z"/>
    <path class="stb" d="M114.3,71.2h-44l44-44v44z"/>
  </g>
  <g id="c">
    <path class="trans" d="M174,69.2h-43.3V25.8H174v43.3z"/>
    <path class="stc" d="M172.3,66.7H129V23.3h43.3v43.3z"/>
  </g>
  <g id="d">
    <use x="58" xlink:href="#c" />
    <use x="119.7" xlink:href="#b" />
    <use x="169.8" xlink:href="#a" />
  </g>
</svg>


W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
46.875ms