0

สิ่งที่ผมมักจะลืมเวลาใช้ xhtml + svg + javascript

  1. ลืมใช้ xhtml ดูเหมือนว่า svg จะใส่ลงไปใน html 4 ธรรมดาลำบากกว่า xhtml
  2. ลืมเปลี่ยน content-type เวลาส่ง text/html มาเฉยๆ เหมือนมันเจ๊ง ฯ ก็เลยส่ง application/xhtml+xml ไปแทน
  3. ลืมใช้ header ที่ถูกต้อง หลังมาผมปะอันนี้ไปเลย
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. ผมมักจะเขียน Javascript ด้วย ก็มักจะลืม //<![CDATA[
  5. ลืมว่าใส่ tag ของ svg อย่างไร หลังๆ ผมก็ copy อันนี้มาปะเลย
    <svg width="3cm" height="3cm" id="treeview"
         xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
  6. อย่างอื่นๆ ก็คงลืม แบบลืมไปแล้วว่าลืม
2

ขยายขนาด Text ใน SVG ผ่าน CSS ไม่รอด T_T

กะว่าใส่ font-size ไปใน css แล้วจะได้ตัวอักษรตัวใหญ่เลย ลองเปิดใน Firefox, Chromium และ Opera ดูก็ตัวเล็กนิดเดียว ใช้ไม่ได้ T_T … แต่ว่าเปิดด้วย inkscape เป็นตัวใหญ่ซะงั้นนะ  งง

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 800 800"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<style>
text {
fill: blue;
font-size: 400;
}
</style>
</defs>
<text x="50" y="150" width="600" height="400">Test</text>
</svg>

งงแต่ก็แก้อะไรไม่ถูก -_-!

<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”&gt;
<svg width=”8cm” height=”8cm” viewBox=”0 0 800 800″
xmlns=”http://www.w3.org/2000/svg&#8221; version=”1.1″>
<defs>
<style>
text {
fill: blue;
font-size: 400;
}
</style>
</defs>
<text x=”50″ y=”150″ width=”600″ height=”400″ font-size=”100″>Test</text>
</svg>
0

วาดหม้อที่เอาไว้แทนข้อมูล ใน flowchart ด้วย SVG

ผมว่าผมวาดสวยกว่า dia 0.96.1 นะ … อาจจะมีผมคิดแบบนั้นคนเดียว

storage

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="15cm" height="15cm" viewBox="100, 100"
 xmlns="http://www.w3.org/2000/svg" version="1.1">

 <g transform="translate(50, 100) scale(4)">
 <ellipse cx="50" cy="0" rx="50" ry="5" fill="white"
 stroke-width="1" stroke="black"/>
 <path d="M0,0 L0,70 100,70 100,0" fill="none"
 stroke="black" stroke-width="1"/>
 </g>
</svg>
0

วาดรูปคนเสื่อมๆ โดยคนเสื่อม ด้วย SVG

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="21cm" height="29.7cm" viewBox="0 0 1000 1414"
 xmlns="http://www.w3.org/2000/svg" version="1.1">

 <!-- person -->
 <g transform="translate(300, 150) scale(6)">
 <!-- body -->
 <line x1="0" y1="0" x2="0" y2="60"
 stroke="black" stroke-width="2"/>

 <!-- legs -->
 <line x1="0" y1="60" x2="40" y2="90"
 stroke="black" stroke-width="2"/>
 <line x1="0" y1="60" x2="-40" y2="90"
 stroke="black" stroke-width="2"/>

 <!-- arms -->
 <line x1="-40" y1="30" x2="40" y2="30"
 stroke="black" stroke-width="2"/>

 <!-- head -->
 <circle stroke="black" stroke-width="2"
 fill="white" cx="0" cy="0" r="20"/>

 <!-- eyes -->
 <circle stroke="black" stroke-width="2"
 fill="white" cx="-7" cy="-3" r="3"/>
 <circle stroke="black" stroke-width="2"
 fill="white" cx="7" cy="-3" r="3"/>

 <!-- nose -->
 <line x1="0" y1="3" x2="0" y2="7"
 stroke="black" stroke-width="2"/>

 <!-- mouth -->
 <path d="M-10,10 Q0,20 10,10" fill="none"
 stroke="black" stroke-width="2"/>
 </g>
</svg>

person


			
0

SVG: Who is on top? ใครอยู่บน

ภาพที่เขียนด้วย SVG มันมีโอกาสจะทับกันได้แล้ว อะไรจะอยู่บน (เราเห็น) อะไรจะอยู่ล่าง (โดนทับ) … คำตอบจากที่ลองใน Firefox คือ มาทีหลังอยู่บน


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 800 800"
 xmlns="http://www.w3.org/2000/svg" version="1.1">

 <rect x="100" y="100" width="150" height="150" fill="orange"/>
 <circle cx="200" cy="200" r="70" fill="blue" />

</svg>

ถ้าเป็นตัวอย่างข้างบน วงกลม กับ สี่เหลี่ยม มันซ้อนกัน แต่ว่า วงกลม มาทีหลังจึงอยู่บน

0

ย้ายตำแหน่งของ group ใน SVG

ใน Group ของ SVG เราใส่ attribute ชื่อ transform เข้าไปได้ มันขยาย หมุน ย้ายที่ ใส่ matrix เข้าไปคูณอะไรได้สารพัด แต่ว่าแค่ย้ายที่ก็ใช้ transform=”translate(10,20)” แบบนี้ก็จะย้ายไปทางขวา 10 ลงล่าง 20

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="21cm" height="29.7cm" viewBox="0 0 1000 1414"
     xmlns="http://www.w3.org/2000/svg" version="1.1">     

    <!-- ข้างล่าง -->
    <g transform="translate(10, 20)">
        <text x="10" y="30" font-size="20" 
            fill="blue">Test</text>
    </g>
</svg>
0

หลังจากที่แปลง svg เป็น eps แล้วข้อความภาษาไทยเจ๊ง

ผมแปลง svg แบบนี้

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="8cm" viewBox="0 0 800 800"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="50" y="150" width="600" height="400" font-size="100" fill="blue">ไทย Thai</text>   
</svg>

เปิดด้วย Firefox หรือ Inkscape ก็ดูได้ปกติ แต่พอสั่ง

inkscape -E thaitext1.eps  thaitext1.svg 

พอเปิดด้วย kghostview แล้วก็ออกมาไม่เป็นภาษาไทย แต่ว่าผมเห็นเวลา inkscape จะ save เป็น .eps เลือกได้ว่าเปลี่ยน text เป็น path ได้ ผมก็เลยไปทำกับ command line บ้าง จึงเปลี่ยนคำสังเป็นแบบนี้

inkscape -E thaitext1.eps --export-text-to-path thaitext1.svg 

ก็เป็นอันใช้ได้ ;-)