置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模組:SVG Data URL/doc

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

此頁面為 Module:SVG Data URL 的說明文件

本模塊使得可以在頁面中嵌入SVG圖像。用途包括:實現隨wikitext變化的內容;避免小而雜亂的圖被上傳到共享站;……

本站沒有啟用<svg>標籤,顯示SVG的原理是使用Data URL<img>提供源。

用法

參數svg填SVG代碼。前面不要填<?xml …<!DOCTYPE svg …,直接以<svg開頭。

沒指定xmlns的話,會自動加上xmlns="http://www.w3.org/2000/svg"

{{svg|svg=
<svg width="300" height="200">
  <rect width="100%" height="100%" fill="darkturquoise"/>
  <circle cx="150" cy="100" r="80" fill="cadetblue"/>
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
}}

SVG

svgsrcsrcset以外的任何參數,如widthaltclassstyle等,會被原封不動地添加到<img>上。不需要加引號。

{{svg
|width=100
|style=border-radius:6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
|alt=表情
|svg=
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93.1 81.3">
  <path d="M93.1,44.8v36.5H4.6C0,64.1-.3,51.9,.1,34.3c0-5.9,.3-17.6,5.8-21.7,7,.7,9.8,7.5,16,9.6,9.7-3.7,20.1-4.6,30.1-4.8C58,9.9,62.1,1.5,71.6,0c5.3,2.5,6,7,7.1,11.4,1.6,6.2,2.7,12.5,4.7,18.6,1.9,5.6,3.5,11.8,9.7,14.8Z"/>
  <circle cx="25.8" cy="47.7" r="9" fill="#fff"/>
  <circle cx="58.2" cy="42" r="9" fill="#fff"/>
  <circle cx="22.6" cy="45.6" r="5"/>
  <circle cx="62" cy="43.6" r="5"/>
</svg>
}}

表情

注意

作為文字的"'需要換為XML實體("&quot;'&apos;),否則兩者會顛倒。

{{svg|svg=
<svg width="300" height="100" style="background:#fff">
  <text x="150" y="40" font-size="20" text-anchor="middle">字符:"双引号" '单引号'</text>
  <text x="150" y="80" font-size="20" text-anchor="middle">实体:&quot;双引号&quot; &apos;单引号&apos;</text>
</svg>
}}

SVG