draw.ioを使っていると、良い図形がなくて困るときがあります。
そんなときはお絵かきソフトで自作して、インポートして使ってらっしゃらる方も多いと思います。
でも、図形はそのままで色だけ変えたいときってありますよね？
色を変えて作図すればよいのですが、面倒です・・・
。
※公開鍵（のつもり）
draw.ioにはスタイルを設定できる図形があるので、
自作図形もこのようにできないかなと思って色々調べてみました。
※draw.ioによるスタイル設定
大まかな手順は以下のとおりです。
1．自作SVGをテキストエディタで開き、styleタグを埋め込む
<!-- 略 -->
<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>
<path>
<!-- 略 -->
2. 自作SVGのfill、stroke属性を削除しclass属性を与える
属性の削除と追加
(略)
id=”path14”
class=”st2” ←クラスst2のスタイルを指定する場合
style=”….(略);fill:#ffcc00;stroke:none; ….(略)
3. draw.ioにインポートし、設定を加える
スタイルタブ→編集プルダウン→フォーマットを編集
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時は...
- 「選択中のもののみエクスポート」にチェックを入れます
- 「Plain SVG(*.svg)」を指定します
2. SVGにstyleタグでCSSクラス定義を埋め込む
- Exportしたファイルをテキストエディタで開き、styleタグを埋め込みます。
<style type="text/css">
.st0{fill:#a2a2a2;}
.st1{fill:#8e8e8e;}
.st2{fill:#ffffff;stroke:#ffffff;}
</style>
3. fillやstrokeの属性を削除する
-
styleタグで定義したスタイルクラス(.st0や.st1、.st2のこと)を反映させたい場所を特定します。
-
該当箇所の
fill:#xxxxxxやstroke:xxxxxxの属性を削除しましょう。
変更前
変更後：クラス属性を与え、fill属性を削除
※st0にはstroke属性のスタイルしていないので、stroke属性は削除していません。
- この例ですと、
id=path14が鍵のpath、id=tspan9-8が"公"という文字のpathに該当します。 - fillやstroke属性が残っていると、この設定が優先され、スタイルが反映されません。
※左が変更前、右が変更後
4. draw.ioに図形をインポートする
ファイル→次の場所からインポート
5. draw.ioでの設定
自作図形をインポートしたら、
スタイルタブ→編集プルダウン→フォーマットを編集 で
編集用のダイアログが表示されるので、以下の属性を追加して適用しましょう。
editableCssRules=.*;
shape=image;editableCssRules=.*;
スタイルを変更できるようになった！
