วิธีการสร้างสัญลักษณ์ svg ที่มีสีเติมสามารถแก้ไขสีจังหวะและความกว้างจังหวะ?

ฉันต้องการสร้างสัญลักษณ์ svg สำหรับ Qgis โดยใช้ Inkscape สัญลักษณ์เหล่านั้นต้องมีแอตทริบิวต์ตามที่อธิบายไว้ในคำถาม ในช่วงสองวันที่ผ่านมาฉันได้รับการทดสอบตามคำแนะนำของSourcepoleและเลียนแบบสัญลักษณ์บางอย่างมาพร้อมกับ qgis ที่มีคุณสมบัติที่ต้องการโดยไม่ประสบความสำเร็จ

ในที่สุดฉันก็ทดลองกับสัญลักษณ์รูปแบบที่ง่ายที่สุด: ฉันสร้าง svg ที่มีเพียงวงกลมใน Inkscape และพยายามปรับเปลี่ยนมัน

ไฟล์ต้นฉบับ ( circle.svg ) มีบรรทัดนี้:

<path
   sodipodi:type="arc"
   style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

ฉันแก้ไขมันเป็น:

<path
   sodipodi:type="arc"
   style="fill:param(fill) #ffffff;fill-opacity:1;stroke:param(outline) #000000;stroke-width:param(stroke-width) 1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

บันทึกเป็นcircle_modified.svgและเลือกเป็นสัญลักษณ์จุด แต่ Qgis ไม่สามารถเปลี่ยนพารามิเตอร์ทั้งสามได้ในเวลาเดียวกัน

ฉันทำอะไรผิดหรือควรทำแตกต่างกันอย่างไร

ระบบของฉัน: Qgis 1.8.0 บน Ubuntu 12.04 64 บิต, Inkscape 0.48, โปรแกรมแก้ไขข้อความ Gedit 3.4.1

เพื่อสร้างสัญลักษณ์ SVG กับแก้ไขได้เติมสี , สีจังหวะและความกว้างของจังหวะใน QGIS คุณควรเปลี่ยนรูปแบบแอตทริบิวต์จากเส้นทางองค์ประกอบ 3 แอตทริบิวต์เหล่านี้:

• fill = "param (fill) #FFF"
• stroke = "param (เค้าร่าง) # 000"
• stroke-width = "พารามิเตอร์ (เค้าร่างความกว้าง) 1"

หากคุณกำลังใช้ InkScape หลังจากเขียนไฟล์ SVG ใหม่ให้แก้ไขไฟล์และแทนที่ทั้งบรรทัดที่เริ่มต้นด้วยสไตล์:

style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)"

ด้วยบรรทัดต่อไปนี้:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

ฉันต้องการทำเช่นนี้ตั้งแต่ค้นพบวิธีเพิ่มสัญลักษณ์ SVG เมื่อวานนี้แต่มันเป็นสีดำทั้งหมด คำตอบที่ได้รับจาก jgrocha ทำงาน - ฉันต้องการลงคะแนน แต่เมื่อเข้าร่วมฟอรัม GIS ฉันต้องได้รับชื่อเสียงก่อน!

ฉันพบหน้านี้ซึ่งยืนยันคำตอบ: สัญลักษณ์ SVG ใน QGIS ด้วยสีที่ปรับเปลี่ยนได้

เพื่อให้มีความเป็นไปได้ที่จะเปลี่ยนสีของเครื่องหมายเราจะต้องเพิ่ม 'param (fill)' สำหรับสีเติม 'param (เค้าร่าง)' สำหรับสีของเค้าร่างและ 'param (เค้าร่างกว้าง)' สำหรับความกว้างของลายเส้น ตัวยึดเหล่านี้สามารถเลือกได้ตามค่าเริ่มต้น:

<svg width="100%" height="100%">
  <rect fill="param(fill) #ff0000" stroke="param(outline) #00ff00" stroke-width="param(stroke-width) 10" width="100" height="100">
  </rect>
</svg>`

ขอบคุณ!

ดูเหมือนว่าควรจะให้คำตอบง่ายๆเกี่ยวกับพื้นฐานของ SVGs เพื่อดูรายละเอียดที่เฉพาะเจาะจงเกี่ยวกับซอฟต์แวร์ ...

ไฟล์ SVG เป็นเพียงไฟล์ข้อความ ไฟล์สิ้นสุดจะเป็น. svg แต่สามารถเปิดได้ในโปรแกรมแก้ไขข้อความเหมือนกับไฟล์ที่ลงท้ายด้วย. txt

ไฟล์ svg อย่างง่ายมีลักษณะดังนี้:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment -->

<g id="group1">
<title>My group</title>
<rect id="rectangle1" height="29" width="27" y="50" x="57" stroke-width="1.5" stroke="#000" fill="#ff0"/>
<ellipse ry="17" rx="16" id="circle1" cy="64" cx="113.5" stroke-width="1.5" stroke="#999" fill="#aaa"/>
<path id="path1" d="m56.5,97l51.5,1l5,25l-29,-5l-27.5,-21z" stroke-width="1.5" stroke="#f00" fill="#fff"/>
</g>
</svg>

ในที่นี้คุณจะเห็นว่าสีถูกกำหนดโดยพารามิเตอร์ (ซึ่งจุดจะถูกแทนที่ด้วยอักขระระหว่าง 0-9 หรือ AF):

stroke=#...
fill=#...

และความกว้างของเส้นขีดถูกกำหนดโดย

stroke-width="..."

สามารถเพิ่มข้อมูลต่อไปนี้โดยใช้โปรแกรมแก้ไขข้อความเพื่อแทนที่ค่าใด ๆ ที่คุณเลือกใน SVG ... ทำให้ค่าที่ตั้งโดย QGIS เป็นไปได้ QGIS เข้าใจค่าสำหรับ 'param (fill)' - และค่า 'param (... )' อื่น ๆ - เนื่องจากค่าเหล่านี้ถูกกำหนดโดย QGIS

เติมสี: fill="param(fill) #FFF"

โครงร่าง / สีของเส้น: stroke="param(outline) #000"

เค้าร่าง / ความกว้างของเส้น: stroke-width="param(outline-width) 1"

เติมความทึบ: fill-opacity="param(fill-opacity)"

โครงร่าง / ความทึบของเส้น: stroke-opacity="param(outline-opacity)"

โปรดทราบว่าไม่มีอะไรจะหยุดคุณโดยใช้ค่า 'param (... )' ในสถานที่แปลก ๆ เล็กน้อยดังนั้นตัวอย่างเช่นคุณสามารถใช้ค่า 'param (fill-opacity)' เพื่อกำหนดสีเติมในบิตเดียว ไฟล์ SVG แต่เป็นเส้นขีด / เส้นสีในอีกเล็กน้อยของ SVG

ในกล่องโต้ตอบผู้แต่ง QGIS หรือสัญลักษณ์สไตล์การตั้งค่าสำหรับสี SVG นั้นค่อนข้างชัดเจน ความทึบของสีเติมและสโตรก / ลายเส้นเป็นส่วนหนึ่งของการตั้งค่าสี การตั้งค่าความกว้างเส้นขีด / เส้นชัดเจน

สุดท้ายสองคะแนน

ก่อนอื่นโปรดทราบว่าในขณะที่อยู่ใน SVG คุณสามารถกำหนดสีเป็นชุดของแอตทริบิวต์ได้ดังนี้:

style="fill:none;fill-opacity:1;stroke:#000000;"

สิ่งนี้ดูเหมือนจะไม่ทำงานอย่างถูกต้องหากคุณรวมพารามิเตอร์ตามที่อธิบายไว้ที่นี่

ประการที่สองเมื่อใช้ซอฟต์แวร์เช่น Illustrator หรือคุณลักษณะเพิ่มเติมจำนวนมากของ Inkscape สามารถเพิ่มลงในข้อความ SVG โดยซอฟต์แวร์นี้ หากคุณรู้ว่าคุณกำลังทำอะไรและเข้าใจพื้นฐานของ SVG ดังกล่าวข้างต้นอาจทำให้ชีวิตง่ายขึ้นหากคุณกำจัดข้อความเพิ่มเติมนี้ โดยเฉพาะอย่างยิ่งคุณอาจพบว่ามีการตั้งค่าสีตามคำนิยามของรูปแบบมากกว่าทีละรายการ

ฉันยังมีปัญหาเดียวกัน แต่หลังจากความพยายามบางอย่างมันก็ทำงานได้ในที่สุด ฉันกำลังเขียนขั้นตอนที่นี่หวังว่ามันจะเป็นประโยชน์ ฉันสร้างเกลียวง่าย ๆ ใน inkscape และบันทึกเป็น svg จากนั้นฉันก็เปิดในโปรแกรมแก้ไขข้อความ (เช่น Notepad ++) และรายการ "สไตล์" เกิดขึ้นสองครั้งในรหัส svg ของฉัน ครั้งแรกในก้อนนี้:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
  <stop
     style="stop-color:#000000;stop-opacity:1;"
     offset="0"
     id="stop6174" />
</linearGradient>

แล้วที่นี่:

<path
   sodipodi:type="spiral"
   style="fill:none;fill-rule:nonzero;opacity:1;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:35;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"
   id="path4686" />

ในการทำให้โค้ดทำงานเพื่อให้สามารถใช้ svg Spiral ที่สามารถแก้ไขได้ใน qgis ฉันได้ลบรายการ "style" แรกออกจากโค้ดแรกอย่างสมบูรณ์:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
</linearGradient>

และแทนที่รายการ "สไตล์" ที่สองในโค้ดอันที่สองดังนี้:

<path
   sodipodi:type="spiral"
   fill="param(fill) #000" stroke="param(outline) #FFF" stroke-  width="param(outline-width) 1"
   id="path4686" />

"# 000" และ "#FFF" เป็นสีเริ่มต้นสองสีสำหรับการเติมและเค้าร่างขณะที่ "1" เป็นความกว้างเค้าร่างเริ่มต้นหากไม่ได้ระบุแตกต่างกัน หลังจากบันทึกการเปลี่ยนแปลงเหล่านี้คุณสามารถจัดเก็บ svg ในเส้นทางที่ถูกต้องหนึ่งที่ระบุโดย QGis (ขึ้นอยู่กับรุ่นที่สามารถพบได้ในการตั้งค่า -> ตัวเลือก -> เส้นทาง SVG) ในที่สุดวัตถุ svg ใหม่ของคุณจะปรากฏขึ้นท่ามกลางวัตถุเริ่มต้นอื่น ๆ และจะสามารถแก้ไขได้

หวังว่ามันจะช่วยได้

ฉันจะขยายตัวในเรื่องนี้เพราะมันใช้เวลาสักพักกว่าที่ฉันจะทำงานได้ สร้างสัญลักษณ์ของคุณและบันทึกเป็น Inkscape SVG และเปิดในโปรแกรมแก้ไขข้อความ ในบล็อกรหัสด้านล่างคุณจะเห็น; style = "fill: # 00a000; opacity: 1; stroke: # 000000; width-stroke: 1; (... )" แทนที่บรรทัดนี้ด้วย; Fill = "param (fill) #FFF" stroke = "param (เค้าร่าง) # 000" stroke-width = "param (width-width) 1" ในไฟล์ SVG ของฉันบรรทัดสไตล์จะปรากฏขึ้นสำหรับทุกเอนทิตี้หรือรูปร่างใน svg และ การแทนที่บรรทัดเหล่านั้นไม่ได้ผลสำหรับฉัน แต่ทำที่ด้านล่างของ Inkscape SVG ได้ผล ฉันลองใช้วิธีแก้ไขปัญหาและคำแนะนำในรูปแบบ SVG ที่เพิ่มประสิทธิภาพและธรรมดา แต่ไม่ได้ผลหวังว่าจะช่วยได้ Inkscape 0.48, QGIS 2.12.0, NotePad ++

ดูเหมือนว่าจะมีปัญหาหากเราใช้ค่าที่แน่นอน ทุกครั้งที่เราเปิดตัวเลือกค่าสีหรือจังหวะแต่ละค่าจะถูกรีเซ็ตเป็นค่าใน SVG สิ่งนี้สามารถแก้ไขได้โดยการตั้งค่าในตัวเลือกขั้นสูง การทดสอบของฉันแสดงให้ฉันเห็นว่ามันจะดีกว่าที่จะใช้fill="param(fill)"แทนfill="param(fill) #FFF"และอื่น ๆ ใน SVG

วิธีแก้ไขปัญหาอื่นที่น่าสนใจ: หากคุณมี SVG ที่มีสีพื้นหน้าและสีพื้นหลังคุณสามารถใช้สีเส้นขีดเป็นสีพื้นหลังสีเติมของคุณ สังเกตจากนั้นคุณจะไม่สามารถใช้สีเค้าร่างแยกกันสำหรับ SVG ทั้งหมดได้

ขอขอบคุณทุกท่าน. มีเคล็ดลับที่ดีที่นี่และพวกเขาชี้ให้ฉันในทิศทางที่ถูกต้อง แต่ไม่มีใครได้แก้ไขปัญหาเฉพาะของฉันดังนั้นฉันจะเพิ่มสิ่งที่ฉันคิดออกมาในหม้อ เนื่องจากดูเหมือนจะไม่มีคำตอบที่ถูกต้องสำหรับทุกกรณีฉันจึงขอเสนอคำแนะนำสำหรับการทดสอบผลลัพธ์ของคุณโดยเร็วที่สุด

การทดสอบการแก้ไขอย่างรวดเร็ว

• ย้ายไอคอน svg ทั้งหมดชั่วคราวออกจากโฟลเดอร์ QGIS svg
• ทำสำเนาไฟล์ svg ที่คุณต้องการทำงานอ่านอย่างเดียวเพื่อที่คุณจะไม่เขียนทับมันและวางเวอร์ชั่นที่แก้ไขได้ในโฟลเดอร์ sgg sgg
• เปิด QGIS โหลดเลเยอร์จุดเพื่อทำงานเปิดคุณสมบัติเลเยอร์แล้วเลือก "SVG marker"
• คุณอาจต้องการคลิกขวาที่ไฟล์ svg และตั้งค่าเริ่มต้นโปรแกรม "Open with" เป็น Notepad ชั่วคราวเพื่อให้คุณสามารถคลิกสองครั้งที่ไฟล์เหล่านั้นเพื่อแก้ไขใน Notepad

ด้วยการตั้งค่านี้คุณสามารถดูได้ทันทีว่า QGIS ตอบสนองต่อการแก้ไขของคุณอย่างไร ปล่อยให้ไฟล์ svg เปิดอยู่ใน Notepad และบานหน้าต่างคุณสมบัติเปิดใน QGIS หากต้องการทดสอบผลลัพธ์ของการแก้ไขเพียงกด Ctrl + S เพื่อบันทึกใน Notepad และสลับไปที่ QGIS หากต้องการโหลด svg ใหม่ให้เปลี่ยนประเภทเลเยอร์สัญลักษณ์เป็นอย่างอื่นจากนั้นเปลี่ยนกลับเป็นเครื่องหมาย SVG มีเพียงหนึ่งเดียวในนั้นดังนั้นคุณจึงไม่มีปัญหาในการค้นหา ฉันทดสอบการแก้ไขหลายสิบครั้งอย่างรวดเร็วเช่นนี้ หากคุณมีปัญหาในการรับ svg กลับไปที่แบบฟอร์มแหล่งที่มาหลังจากการแก้ไขคุณสามารถลบมันและสร้างสำเนา

การทำให้ไอคอน SVG สามารถแก้ไขได้

ปัญหาที่ฉันมีคือไอคอนเฉพาะที่ฉันทำงานไม่มีคำว่า "สไตล์" หรือ "เติม" ที่ใดก็ได้ดังนั้นฉันจึงมีปัญหาในการหาตำแหน่งที่จะวางบรรทัดพารามิเตอร์ เคล็ดลับ Inkscape ที่อธิบายโดย Martina แก้ปัญหานี้ได้ แต่ฉันมีพวกเขามากมายที่ต้องทำและฉันไม่ต้องการเปิดและบันทึกแต่ละรายการใน Inkscape ดังนั้นฉันจึงตัดสินใจลองผิดลองถูก มองไปที่รหัสฉันจะได้เห็นว่าข้อมูลรุ่นและเมตาดาต้าอยู่ที่ด้านบนและคำแนะนำรูปร่างอยู่ที่ด้านล่างในอัญประกาศที่ถูกล้อมรอบที่จุดเริ่มต้นโดย<g><path d=(บางคนมี<g><g><path d=) /></g></svg>และในตอนท้ายด้วย หลังจากการทดลองเล็กน้อยฉันคิดว่าการใส่เส้นพารามิเตอร์ระหว่างpathและd=ใช้งานได้ แต่ไอคอนไม่ปรากฏในบานหน้าต่างตัวเลือกและไอคอนในบานหน้าต่างแสดงตัวอย่างที่ด้านบนเต็มไปด้วยสีดำทั้งหมด ปัญหาไอคอนที่มองไม่เห็นดูเหมือนจะเป็นจุดบกพร่อง ฉันแก้ไขโดยการเพิ่มพารามิเตอร์ความทึบแสงที่ฉันจะอธิบายด้านล่าง ปรากฎว่าการเติมสีดำเป็นเพียงเพราะไอคอนเป็นเพียง 4mm และมันก็เต็มไปด้วยเพียงแค่ร่าง ในการแก้ไขปัญหานี้ฉันชนไอคอนขนาดไม่เกิน 10 มม. (ใน QGIS) และชนโครงร่างลงไปที่ 0.1 (ใน Notepad)

สรุป

หากไอคอนของคุณไม่มีคำว่า "สไตล์" หรือ "เติม" ที่ใดก็ได้ แต่จะมีบรรทัดนี้<g><path d=(หรือ<g><g><path d=) ก่อนคำแนะนำรูปร่างคุณควรจะสามารถเพิ่มพารามิเตอร์แก้ไขโดยแทนที่บรรทัดด้านบนด้วย<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

หากเส้นขอบหนาเกินไปคุณสามารถย่อขนาดได้โดยเปลี่ยนจำนวนสุดท้ายเป็นเศษส่วนเช่น <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

<g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=หากคุณต้องการที่จะทำให้ไอคอนของคุณกึ่งโปร่งใสคุณสามารถทำได้โดยการเปลี่ยนสายดังกล่าวข้างต้นให้เป็นหนึ่งในนี้ ค่าความทึบสามารถตั้งแต่ 1 (ทึบเต็มที่) ถึง 0 (โปร่งใสเต็มที่) และคุณสามารถใช้หนึ่งในร้อยหรือหนึ่งพันเพื่อความแม่นยำเพิ่มเติม (เช่น 0.01) กฎเดียวกันนี้ใช้สำหรับความหนาของเส้นขอบ

หากคุณมีจำนวนมากที่จะแก้ไขคุณสามารถค้นหาไฟล์แบทช์ที่นี่ใน StackExchange เพื่อทำการค้นหาและแทนที่กระบวนการโดยอัตโนมัติ