Làm thế nào để tạo các biểu tượng svg có màu tô có thể sửa đổi, màu Stroke và chiều rộng nét?

Tôi muốn tạo một số biểu tượng svg cho Qgis bằng Inkscape, những biểu tượng đó phải có các thuộc tính như được mô tả trong câu hỏi. Trong hai ngày qua, tôi đã thử nghiệm theo hướng dẫn của Sourcepole và bắt chước một số biểu tượng đi kèm với qgis có thuộc tính mong muốn mà không thành công.

Cuối cùng tôi đã thử nghiệm với hình thức biểu tượng đơn giản nhất: Tôi đã tạo ra một Svg chỉ chứa một vòng tròn trong Inkscape và cố gắng sửa đổi nó.

Tệp gốc ( circle.svg ) có dòng này:

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

Tôi đã sửa đổi nó thành:

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

Được lưu dưới dạng circle_modified.svg và chọn nó làm biểu tượng điểm, nhưng Qgis không thể thay đổi cả ba tham số cùng một lúc.

Tôi đã làm gì sai hay nên làm khác đi?

Hệ thống của tôi: Qgis 1.8.0 trên Ubuntu 12.04 64 bit, Inkscape 0.48, trình soạn thảo văn bản Gedit 3.4.1.

Để tạo các ký hiệu SVG với màu tô có thể sửa đổi , màu đột quỵ và độ rộng nét trong QGIS, bạn nên thay thế thuộc tính style từ thành phần đường dẫn bằng 3 thuộc tính sau:

• điền = "param (điền) #FFF"
• đột quỵ = "param (phác thảo) # 000"
• Stroke width = "param (phác thảo chiều rộng) 1"

Nếu bạn đang sử dụng InkScape, sau khi viết tệp SVG mới, hãy chỉnh sửa tệp và thay thế toàn bộ dòng cầu xin bằng kiểu:

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

với dòng sau:

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

Tôi cũng muốn làm điều này kể từ khi tìm hiểu cách thêm các biểu tượng SVG ngày hôm qua , nhưng tất cả chúng đều màu đen. Câu trả lời được đưa ra bởi jgrocha hoạt động - Tôi muốn bỏ phiếu nhưng chỉ cần tham gia diễn đàn GIS, tôi cần có được danh tiếng trước!

Tôi cũng tìm thấy trang này xác nhận câu trả lời: BIỂU TƯỢNG SVG TRONG QGIS VỚI MÀU SẮC MODIFIABLE

Để có khả năng thay đổi màu của điểm đánh dấu, chúng ta phải thêm các phần giữ chỗ 'param (fill)' cho màu tô, 'param (phác thảo)' cho màu phác thảo và 'param (width-width)' cho chiều rộng nét. Các phần giữ chỗ này có thể được theo sau bởi một giá trị mặc định:

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

Cảm ơn!

Có vẻ đáng để cung cấp một câu trả lời đơn giản về những điều cơ bản của SVG đi cùng với các chi tiết được cung cấp ở đây về các chi tiết cụ thể xung quanh phần mềm ...

Một tệp SVG chỉ là một tệp văn bản. Tệp kết thúc sẽ là .svg nhưng nó có thể được mở trong trình soạn thảo văn bản giống như tệp có đuôi .txt

Một tập tin svg đơn giản trông giống như thế này:

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

Trong phần này, bạn có thể thấy rằng các màu được xác định bởi các tham số (trong đó các chấm được thay thế bằng các ký tự trong khoảng 0-9 hoặc AF):

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

Và chiều rộng hành trình được xác định bởi

stroke-width="..."

Có thể thêm các mục sau đây, bằng cách sử dụng trình soạn thảo văn bản, để thay thế bất kỳ giá trị được xác định nào bạn chọn trong SVG ... giúp cho các giá trị được đặt bởi QGIS. QGIS hiểu một giá trị cho 'param (fill)' - và các giá trị 'param (...)' khác - vì các giá trị này được đặt bởi chính QGIS.

Tô màu: fill="param(fill) #FFF"

Màu đường viền / đường viền: stroke="param(outline) #000"

Độ rộng đường viền / đường kẻ: stroke-width="param(outline-width) 1"

Điền vào độ mờ đục: fill-opacity="param(fill-opacity)"

Độ mờ của đường viền / đường viền: stroke-opacity="param(outline-opacity)"

Xin lưu ý rằng không có gì ngăn bạn sử dụng các giá trị 'param (...)' ở những vị trí hơi kỳ lạ - vì vậy, ví dụ bạn có thể sử dụng giá trị 'param (fill-opacity)' để xác định màu tô trong một bit của Tệp SVG, nhưng màu Stroke / line trong một bit khác của SVG.

Trong đối thoại của nhà soạn nhạc hoặc biểu tượng kiểu QGIS, các cài đặt cho màu SVG khá rõ ràng. Độ mờ của fill và Stroke / line được đặt như một phần của cài đặt màu. Cài đặt chiều rộng nét / dòng là rõ ràng.

Cuối cùng hai điểm

Đầu tiên, lưu ý rằng trong khi trong một SVG, việc xác định màu sắc là một tập hợp các thuộc tính như vậy là hợp lệ:

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

Điều này dường như không hoạt động đúng nếu bạn đang bao gồm các tham số như được mô tả ở đây.

Thứ hai, khi sử dụng phần mềm như Illustrator hoặc Inkscape, rất nhiều thuộc tính bổ sung có thể được thêm vào văn bản SVG bằng phần mềm này. Nếu bạn biết những gì bạn đang làm và hiểu những điều cơ bản của một SVG như trên, nó có thể làm cho cuộc sống đơn giản hơn nếu bạn thoát khỏi văn bản bổ sung này. Cụ thể, bạn có thể thấy rằng màu sắc được đặt thông qua định nghĩa về kiểu chứ không phải theo từng mục.

Tôi cũng gặp vấn đề tương tự nhưng sau một vài lần thử nó cuối cùng cũng hoạt động. Tôi đang viết ở đây thủ tục hy vọng nó sẽ có ích. Tôi đã tạo ra một hình xoắn ốc đơn giản trong inkscape và lưu nó dưới dạng svg. Sau đó, tôi đã mở nó trong một trình soạn thảo văn bản (ví dụ Notepad ++) và mục "kiểu" xuất hiện hai lần trong mã svg của tôi. Đầu tiên trong đoạn này:

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

Và sau đó ở đây:

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

Để làm cho mã hoạt động để có một vòng xoắn svg có thể chỉnh sửa trong qgis, tôi đã loại bỏ hoàn toàn mục "kiểu" đầu tiên khỏi đoạn mã đầu tiên:

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

Và thay thế mục "kiểu" thứ hai trong đoạn mã thứ hai như sau:

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

"# 000" và "#FFF" là hai màu mặc định cho màu tô và viền ngoài trong khi "1" là chiều rộng phác thảo mặc định nếu không được chỉ định khác nhau. Sau khi lưu các thay đổi này, bạn có thể lưu trữ Svg theo đúng đường dẫn, một thay đổi được chỉ định bởi QGis (tùy thuộc vào phiên bản có thể tìm thấy trong Cài đặt -> Tùy chọn -> Đường dẫn SVG). Cuối cùng, đối tượng svg mới của bạn sẽ xuất hiện giữa các đối tượng mặc định khác và nó sẽ có thể chỉnh sửa.

Hy vọng nó có thể giúp

Tôi sẽ mở rộng về điều này bởi vì tôi phải mất một thời gian để làm cho nó hoạt động. Tạo biểu tượng của bạn và lưu nó dưới dạng Inkscape SVG và mở trong trình soạn thảo văn bản. Trong khối mã dưới cùng, bạn sẽ thấy; style = "fill: # 00a000; fill-opacity: 1; Stro: # 000000; Stro-width: 1; (...)" Thay thế dòng này bằng; fill = "param (fill) #FFF" Stro = "param (phác thảo) # 000" Stro-width = "param (phác thảo chiều rộng) 1" Trong các tệp SVG của tôi, dòng kiểu xuất hiện cho mọi thực thể hoặc hình dạng trong svg và thay thế những dòng không làm việc cho tôi; nhưng thực hiện nó ở phía dưới trên Inkscape SVG đã hoạt động. Tôi đã thử giải pháp của mình và các hướng dẫn ở đây trên các định dạng Tối ưu hóa và Đồng bằng SVG nhưng nó không hoạt động, hy vọng điều này sẽ giúp. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Nó dường như là một vấn đề, nếu chúng ta sử dụng một giá trị chính xác. Mỗi khi chúng ta mở các tùy chọn, một giá trị riêng cho màu hoặc nét được đặt lại thành các giá trị trong SVG. Điều này có thể được khắc phục bằng cách đặt một giá trị trong các tùy chọn nâng cao. Các thử nghiệm của tôi cho tôi thấy, sẽ tốt hơn nếu sử dụng fill="param(fill)"thay vì fill="param(fill) #FFF"và cứ thế trong SVG.

Một cách giải quyết thú vị khác: Nếu bạn có một SVG với màu nền trước và sau, bạn có thể sử dụng màu Stroke làm màu nền lấp đầy. Lưu ý, sau đó bạn không thể sử dụng màu phác thảo riêng cho toàn bộ SVG.

Cảm ơn tất cả các bạn. Có một số lời khuyên tuyệt vời ở đây và họ đã chỉ cho tôi đi đúng hướng nhưng không có vấn đề nào giải quyết vấn đề cụ thể của tôi vì vậy tôi sẽ thêm những gì tôi đã tìm ra vào nồi. Vì dường như không có một câu trả lời đúng cho mọi trường hợp, trước tiên tôi muốn đưa ra một đề xuất để kiểm tra kết quả của bạn càng nhanh càng tốt.

Kiểm tra chỉnh sửa nhanh

• Tạm thời di chuyển tất cả các biểu tượng svg của bạn ra khỏi thư mục svg của QGIS.
• Tạo một bản sao của tệp svg mà bạn muốn làm việc chỉ đọc để bạn không ghi đè lên nó và đặt một phiên bản có thể chỉnh sửa của nó trong thư mục svg của QGIS.
• Mở QGIS, tải một lớp điểm để làm việc, mở các thuộc tính của lớp và chọn "Điểm đánh dấu SVG".
• Ngoài ra, bạn có thể muốn nhấp chuột phải vào tệp svg và tạm thời đặt chương trình "Mở bằng" mặc định thành Notepad để bạn chỉ cần nhấp đúp vào chúng để chỉnh sửa chúng trong Notepad.

Với thiết lập này, bạn có thể thấy ngay cách QGIS phản hồi các chỉnh sửa của bạn. Để tập tin svg mở trong Notepad và khung thuộc tính mở trong QGIS. Để kiểm tra kết quả chỉnh sửa, chỉ cần nhấn Ctrl + S để lưu nó trong Notepad và chuyển sang QGIS. Để tải lại svg, thay đổi loại lớp biểu tượng thành bất kỳ thứ gì khác, sau đó thay đổi lại thành điểm đánh dấu SVG. Chỉ có một trong đó để bạn không gặp khó khăn khi tìm thấy nó. Tôi đã thử nghiệm hàng tá chỉnh sửa rất nhanh như thế này. Nếu bạn gặp khó khăn trong việc đưa Svg trở lại biểu mẫu nguồn sau khi chỉnh sửa, bạn có thể xóa nó và tạo một bản sao khác.

Tạo biểu tượng SVG có thể chỉnh sửa

Vấn đề tôi gặp phải là biểu tượng cụ thể mà tôi đang làm việc không có từ "kiểu" hay "điền" ở bất cứ đâu nên tôi gặp khó khăn khi tìm ra nơi để đặt dòng tham số. Thủ thuật Inkscape được mô tả bởi Martina đã giải quyết vấn đề này nhưng tôi có một loạt chúng để làm và tôi không muốn mở và lưu từng cái trong Inkscape nên tôi quyết định thử và dùng thử. Nhìn vào mã tôi có thể thấy rằng thông tin phiên bản và siêu dữ liệu ở trên cùng và các hướng dẫn hình dạng nằm ở phía dưới kèm theo dấu ngoặc kép được giới hạn ở đầu <g><path d=(một số có <g><g><path d=) và ở cuối /></g></svg>. Sau khi thử nghiệm một chút, tôi nhận ra rằng việc đặt dòng tham số giữa pathvàd=đã hoạt động nhưng biểu tượng là vô hình trong khung chọn và biểu tượng trong khung xem trước ở trên cùng hoàn toàn được tô màu đen. Vấn đề biểu tượng vô hình dường như là một lỗi. Tôi đã sửa nó bằng cách thêm một tham số opacity mà tôi sẽ mô tả bên dưới. Hóa ra màu đen chỉ là do biểu tượng chỉ có 4mm và nó được lấp đầy chỉ bằng đường viền. Để khắc phục điều này, tôi đã giảm kích thước biểu tượng lên tới 10 mm (trong QGIS) và giảm đường viền xuống còn 0,1 (trong Notepad).

Tóm lược

Nếu biểu tượng của bạn không có từ "style" hoặc "fill" ở bất cứ đâu, nhưng nó có dòng này <g><path d=(hoặc <g><g><path d=) ngay trước hướng dẫn hình dạng, bạn sẽ có thể thêm các tham số chỉnh sửa bằng cách thay thế dòng trên bằng<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Nếu đường viền quá dày, bạn có thể thu nhỏ nó bằng cách thay đổi số cuối cùng thành một phân số, ví dụ <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Nếu bạn muốn làm cho biểu tượng của bạn bán trong suốt, bạn có thể làm như vậy bằng cách thay đổi dòng trên thành dòng này <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Giá trị độ mờ có thể từ 1 (hoàn toàn mờ) đến 0 (hoàn toàn trong suốt) và bạn có thể sử dụng hàng trăm hoặc thậm chí một phần nghìn cho độ chính xác bổ sung (ví dụ 0,01). Các quy tắc tương tự đi cho độ dày biên giới.

Nếu bạn có rất nhiều trong số chúng để chỉnh sửa, bạn có thể tìm thấy các tệp bó ở đây trên StackExchange để tự động hóa quá trình tìm kiếm và thay thế.