Search
【直播筆記分享】讓我們來做個互動天氣地圖吧！
老闆最近在整理以前的直播，發現有很多值得分享的內容可以用文字記錄下來。就先從動態的 SVG 地圖開始吧，還另外加入了串接中央氣象局的 api，可以即時看到目前各地的天氣狀態！
透過 SVG 可以直接嵌入在 HTML 的特性，直接使用滑鼠的事件監聽就可以改變畫面與資料狀態，搭配上 Vue 的資料綁定，ㄧ下子就可以完成有趣的互動地圖😃
一起來玩互動地圖 👉 https://tinyurl.com/yce85khh
【互動藝術程式創作入門】募資中，已經突破 1700％ 大關，快來一起解鎖新課程 👉 https://hahow.in/cr/creative-coding-1
老闆的 IG 追起來 👉 https://www.instagram.com/bosscodingplease/
#generativeart #creativecoding #digitalart #3dart #webdevelopment #vue #svg
【線上工具】web-capture
只要輸入網址，就可以將目標網頁，整個頁面都下載成一個圖檔，除了 PNG、JPEG 等基本檔案之外，還可以將 HTML 網頁轉換成 SVG 格式下載，雖然遇到特殊語法的網頁會跑圖，但算是非常實用的一個線上工具網站
連結：https://web-capture.net/
更多好料的設計相關資源：https://goo.gl/Jmgmcj
各位前輩好，我有兩張svg 格式的檔案，一張是自己畫的、另一張是別人畫好的，我想把這兩個檔案透過這個網站 ... https://helpx.adobe.com/illustrator/using/svg.html. ... <看更多>
SVG 是向量圖形格式，可以建立二維圖形、動畫與互動; 基於XML文字檔格式，產生DOM 樹 (不同於canvas 是平面畫布) ... view raw svg-rect.html hosted with ❤ by GitHub. ... <看更多>
svg檔html 在 [問題] SVG 引用點陣圖無法在<img> 顯示- 看板Web_Design 的推薦與評價
如題，檔案結構如下：
some.png
some.svg
index.html
我的 svg 以相對路徑引用同一目錄的點陣圖，並加上了一些 svg 的向量圖形：
<image xlink:href="some.png" ... />
直接以瀏覽器開啟 index.svg 檔案可正常顯示。
接著我打算將 svg 嵌入網頁中：
<img href="some.svg" width="500">
但接著以瀏覽器開啟 index.html，
只能看得到 svg 畫的向量圖形，引用的點陣圖卻無法看到。
（在最新版的 Firefox 及 Chrome 上測試）
我也試過將 some.svg 的原始檔開啟，
把 root <svg> 直接貼進 index.html 取代上面的 <img>，
此時點陣圖的部分可以正常顯示
（但似乎無法簡單達到整張 svg 設為 width="500" 的縮放效果）
請教各位前輩，這是什麼原因？有什麼辦法可以解決？
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.34.57.99
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1420383429.A.E73.html
感謝回答，又一個方便功能被安全性殺死了orz
我想做的主要是把一張點陣底圖 some.jpg 在不同地方加上標記輸出，
比如在某處放上 some-1.svg、另一處放 some-2.svg、等等，
用 svg 和 xlink 是為了重複使用相同的點陣圖以節省空間。
不考慮 xlink:href="data:xxx" 的做法，因為 base64 編碼只會更浪費空間...
直接在 HTML 裡內嵌 <svg> 可行，但操作麻煩（內嵌的 svg 不方便用軟體編輯），
似乎也不能縮放大小？
canvas 之類要寫 js 程式碼，也不考慮。
想請教是否有其他重複使用相同點陣圖的策略可用？
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:22:16
我在 Fx 上試了 <embed> 和 <object> ，確實可以載入連結的點陣圖，
但無法縮放大小（設定 width 或 height 會裁切）
這有辦法解決嗎？
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 21:57:10
看不太懂，是改 .svg 原始檔嗎？似乎無效
※ 編輯: danny0838 (114.34.57.99), 01/06/2015 22:57:54
... <看更多>