draw.ioを使っていると、良い図形がなくて困るときがあります。
そんなときはお絵かきソフトで自作して、インポートして使ってらっしゃらる方も多いと思います。

でも、図形はそのままで色だけ変えたいときってありますよね？
色を変えて作図すればよいのですが、面倒です・・・。

※公開鍵（のつもり）

draw.ioにはスタイルを設定できる図形があるので、
自作図形もこのようにできないかなと思って色々調べてみました。

※draw.ioによるスタイル設定

自作SVGのpathタグの前に挿入

<!-- 略 -->
<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>
<path>
<!-- 略 -->

属性の削除と追加

(略)
id=”path14”
class=”st2” 　←クラスst2のスタイルを指定する場合
style=”….(略);~~fill:#ffcc00;stroke:none;~~ ….(略)

スタイルタブ→編集プルダウン→フォーマットを編集

shape=image;のあとに埋め込み

shape=image;editableCssRules=.*;

以下の記事を参考にしています

ここからは、詳しく説明していきます。

1. 作図してSVG形式でExport
2. SVGにstyleタグでCSSクラス定義を埋め込む
3. fillやstrokeの属性を削除する
4. draw.ioに図形をインポートする
5. 図形のフォーマットに属性を加える

1. 作図してSVG形式でExport

まず作図して、SVG形式でExportしましょう。
今回はInkscapeを使用しましたが、SVG形式を扱えるなら他のソフトでも大丈夫だと思います。

Export時は...

2. SVGにstyleタグでCSSクラス定義を埋め込む

自作SVGに埋め込む

<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>

変更前

変更後：クラス属性を与え、fill属性を削除

※st0にはstroke属性のスタイルしていないので、stroke属性は削除していません。

※左が変更前、右が変更後

ファイル→次の場所からインポート

自作図形をインポートしたら、
スタイルタブ→編集プルダウン→フォーマットを編集 で
編集用のダイアログが表示されるので、以下の属性を追加して適用しましょう。

editableCssRules=.*;

shape=image;のあとに埋め込み

shape=image;editableCssRules=.*;