問題タブ [mermaid]

私はROSロボットに取り組んでいます。私は人魚を使って起動ファイルを文書化したいと思っていました。これらの xml ファイルの一部は、次のように同じノードに最適に収まります。

• 名前
• タイプ
• 説明
• ...

それらを個別のノードとして追加すると、ダイアグラムが本当に読みにくくなります。では、これらの情報を含むノードを適切にフォーマットして生成するにはどうすればよいでしょうか?

ここのガイドに従いましDeploying Mermaidた：

https://mermaid-js.github.io/mermaid/#/?id=deploying-mermaid

codepen で使用すると、直接動作します。

https://codepen.io/Ogglas/pen/MWjWNxR

Blazor で有効にするには、BlazorApp.Client -> wwwroot -> index.html を編集し、以下を追加しました<script src="_framework/blazor.webassembly.js"></script>。

Index.razor次に、次の値で編集しました。

ただし、これは人魚図をレンダリングしません。私は何を間違っていますか？

私は js ライブラリ (人魚) を使用して Web ページで svg を生成しています。ユーザーがキーボード ショートカットを使用してさまざまなコマンドをアクティブにすると、svg の一部にスタイルを動的に適用する必要があります。特に、論理モデルで選択されている要素として現在指定されている svg 内の要素を強調表示する必要があります。svg の動的スタイリングに関する他の質問を見ると、インライン化された静的 svg が処理されるため、おそらく私のケースには当てはまらず、これまでに試した方法はどれも機能しませんでした。

私が適用しようとしているスタイルは border-radius : 2rem; box-shadow : 0 0 3rem red; 、通常の html に適用した場合です。これにより、要素に赤い境界線が表示されます。

私が最初に試みたのは、これを要素のクラスとして次のように含めることでした:

、、またはなどの通常の html 要素のクラス リストにクラスを追加する

、望ましいスタイリングを生成します。ただし、プログラムで要素を取得し、そのクラスをそのクラス リストに追加すると、光る境界線がなくなります。Chrome 開発者ツールを使用して svg を調べると、関連するクラスが要素のクラス リストに追加されていることがわかりました。同じ方法を使用すると、通常の html で成功しました。参考までに、クラスを追加するために使用した方法を次に示します。

graphicDiv.querySelector(selector).classList.add('highlight')

これが失敗したので、おそらく svg の内部要素内に何らかのスタイリングがあり、それが私のスタイリングを上書きしているのではないかと考えたので、スタイルに !important を追加して、それらが最も優先されるようにしました。これでもうまくいかなかったので、次に要素のスタイル プロパティを設定しようとしました。

graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')

これでも、svg のスタイリングに違いは生じませんでした。Chrome 開発ツールで要素を調べると、スタイル属性が実際に設定されていることがわかりました。

また、svg が生成された後にスタイル定義を取得し、クラス スタイル定義をそのテキスト コンテンツに追加することで、スタイル定義を svg 自体の要素に追加しようとしました。それでもうまくいきません。

最後に、これらの css プロパティは でサポートされていない可能性があると考えたので、background-color: green;代わりに に変更しました。これは、css を使用した svg のスタイリングに関する記事で、この css prop が . これはうまくいきませんでした。svgの要素に適用してみました。どちらも機能しませんでした。

なぜこれが機能しないのか、私は完全に困惑しています。svg要素のスタイリングを動的に変更する方法を誰かが理解するのを手伝ってくれれば、非常に感謝しています!