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">
<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" 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 

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

0

เขียน svg ด้วย text editor แล้วแปลงเป็น eps จาก shell

ผมอยากเขียน svg จาก text editor แต่ว่าพอไปใช้กับ latex มันเป็น 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">
<rect x="100" y="100" width="500" height="500" 
    fill="yellow" stroke="blue" stroke-width="10"/>
</svg>

ผมก็ save ไว้ใน draw1.svg

แล้วก็สั่งแบบนี้เลย

inkscape -E draw1.eps draw1.svg 

ง่ายๆ แล้ว ก็เปิดดูด้วย kghostview แบบนี้

kghostview draw1.eps

เราก็จะดูได้แล้วว่ารูปออกมาแบบไหน

kghostview

เดี๋ยวต่อไปก็จะลองดูพวกอักษรภาษาไทยว่าจะเจ๊งหรือเปล่า แล้วก็ลองเข้า latex ดู

อ้างอิง
วิธีใช้ inkscape จาก shell
การเขียน svg

2

google appengine + inline svg + xhtml

ผมอยากใช้ inline svg เพราะว่าอยากแสดง gantt chart หน้าเดียวกับ form แต่ว่าพอเอา inline svg ไปใส่ใน html แล้วใช้ไม่ได้ (ก็น่าจะเป็นแบบนั้นอยู่แล้วมั้ง) ก็เลยเปลี่ยนมาใช้ xhtml แทน. แต่ว่าก็พึ่งเคยทำใน gae (google appengine) ก็เลยบันทึกไว้สักหน่อย เวลาใช้ xhtml ก็ต้องเปลี่ยน Content-Type ใน header ของ response หน่อย แบบนี้

...
class MainHandler(webapp.RequestHandler):
    def get(self):
        self.response.headers['Content-type'] = 'application/xhtml+xml'
        ...

แค่นี้ผมก็นึกว่าจะเนียนแล้ว แต่พอจะส่ง url ออกไป logout พบว่ามี & ติดอยู่โดยไม่ได้ escape และ Firefox ก็ไม่ยอมแสดงผล (ซึ่งก็น่าจะเป็นแบบนั้นอีกตามเคย) ผมก็เลยเขียนแก้ไปแบบ อาจจะสกปรกหน่อย เพราะนึกอะไรไม่ออก

...
class MainHandler(webapp.RequestHandler):
    def get(self):
        ...
        path = os.path.join(os.path.dirname(__file__), 'index.html');
        val = {'logout_url': users.create_logout_url(self.request.uri).replace("&amp;", "&amp;"),
               ... }
        self.response.out.write(template.render(path, val))

ก็คือ replace & ด้วย &amp; ไปตรง แต่ก็ไม่รู้ว่าแบบนี้จะใช้ได้ทุกกรณีหรือเปล่า

<div id="result">
    
        {{ svg }}
    
</div>

ใน template ผมก็เอา svg ไปใส่ได้เลย ... ดูตัวอย่างได้จาก vtimeline revision 13