紋理產生器 App

既然可以創造紋理，剛好自己也需要，所以花了點時間寫了這個 app , 所用到的技術都在 有趣的 SVG filter - 創造紋理 ，而且還有一些紋理的技術沒有放上去，等改天有空再來改版。

寫這個 app 其中一個目的是製作長輩圖，雖然長輩圖的 app 已經多到一個不行，但是沒有任何一個可以像我一樣創造自己的紋理套到文字上去。

Android 下載 : Texture Maker

iOS  下載 : Texture Maker

 

SVG 插入 html - foreignObject

SVG 使用的命名空間和 html 不同，然而和 html 整合良好，和 CSS 也可以互通有無，那麼可以在 html 中插入 SVG 是否也可以在 SVG 中插入 html 呢 ? 想不到還真的可以。一直以來都把 SVG 視為「向量圖檔」，如果 SVG 中可以插入 html 是不是表示 SVG 本身可以當個小型瀏覽器了 ? 無意間看到 SVG 有個有趣的東西叫 foreignObject ，先來一個範例 範例中，在 foreignObject 中放了一個 div 並指定命名空間 <font color="#00f">xmlns="http://www.w3.org/1999/xhtml"</font> 就可以在 SVG 中放 html , 連 input 這種元件都可以 實測結果，在 safari 中，svg 的位置會被固定在上一層座標 (0,0) 的地方，然後 viewBox 也沒作用，所以下面的範例在 svg 外層包了一個 div 並指定 position:absolute 才解決位置的問題，因為 viewBox 沒作用，所以 svg 裡面的圖沒有被放大兩倍。 ``` $mmcode(r1) ``` <div class="mmresult r1"> <div style="position:absolute"> <!-- 為了處理 safari 的支援問題 --> <svg width="300" height="300" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa"> <foreignObject x=10 y=10 width="130" height="130"> <div xmlns="http://www.w3.org/1999/xhtml"> <div style="position:absolute;left:0;top:0;width:100%;height:100%;background-color:#faa"> <p style="background-color:#afa">這是 html，可以自動換行</p> <p style="background-color:#aaf">輸入: <input type="text" style="width:10ch;"></p> </div> </div> </foreignObject> </svg> </div> <div style="height:300px"></div> </div>

SVG 使用的命名空間和 html 不同，然而和 html 整合良好，和 CSS 也可以互通有無，那麼可以在 html 中插入 SVG 是否也可以在 SVG 中插入 html 呢 ? 想不到還真的可以。一直以來都把 SVG 視為「向量圖檔」，如果 SVG 中可以插入 html 是不是表示 SVG 本身可以當個小型瀏覽器了 ?

無意間看到 SVG 有個有趣的東西叫 foreignObject ，先來一個範例

範例中，在 foreignObject 中放了一個 div 並指定命名空間 xmlns="http://www.w3.org/1999/xhtml" 就可以在 SVG 中放 html , 連 input 這種元件都可以

實測結果，在 safari 中，svg 的位置會被固定在上一層座標 (0,0) 的地方，然後 viewBox 也沒作用，所以下面的範例在 svg 外層包了一個 div 並指定 position:absolute 才解決位置的問題，因為 viewBox 沒作用，所以 svg 裡面的圖沒有被放大兩倍。

<div style="position:absolute"> <!-- 為了處理 safari 的支援問題 -->
<svg width="300" height="300" viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffa">
  <foreignObject x="10" y="10" width="130" height="130">
    <div xmlns="http://www.w3.org/1999/xhtml">
    <div style="position:absolute;left:0;top:0;width:100%;height:100%;background-color:#faa">
      <p style="background-color:#afa">這是 html，可以自動換行</p>
      <p style="background-color:#aaf">輸入: <input type="text" style="width:10ch;"></p>
    </div>
    </div>
  </foreignObject>
</svg>
</div>  
<div style="height:300px"></div>