如何将 CSS / 样式应用于导入的联合 js bpmn 对象？答案

【问题标题】：How to apply CSS / Styling to imported joint js bpmn objects?如何将 CSS / 样式应用于导入的联合 js bpmn 对象？
【发布时间】：2016-06-16 08:54:30
【问题描述】：

我们最近将仪表板的部分内容与一家为我们提供业务流程模型和表示法 (BPMN) json 对象的公司集成。

我们将带有“fromJSON()”的BPMN json对象导入joint.dia.Paper。

而且效果很好。

我不知道如何设置该对象的样式？如何将 CSS 或任何其他形式的样式应用于导入的对象？

提前致谢:-)

【问题讨论】：

标签： javascript css json jointjs

【解决方案1】：

更新：

这适用于 Rappid 2.0：

CSS 应该可以正常工作，例如

<style>
    .joint-theme-bpmn[data-type='bpmn.Event'] circle {
        stroke: red;
    }
</style>

其中data-type 对应于特定元素上的属性type：

    joint.shapes.bpmn.Event = joint.dia.Element.extend({

        // ... markup ... 

        defaults: joint.util.deepSupplement({
            type: 'bpmn.Event',
            // attrs: {
            // ...

对于 1.x 版本：

而不是属性data-type 有一个没有. 的类名，所以对于bpmn.Event 类型你可以找到类似的东西

<g id="j_46" model-id="083..." class="element bpmn Gateway" ">...</g>

那么这样的 CSS 应该可以工作了：

 <style>
        .bpmn.Event circle {
            stroke: red;
        }

    </style>

【讨论】：

查看 bpmn 对象（使用 console.dir 或 Chromes 开发人员工具），bpmn 对象中没有数据类型？ “bpmn.Event”是通用标识还是特定对象？同样的问题也适用于“圆”——那是一个特定的对象吗？您能否举个例子来改变 Pool bpmn 对象的背景？在此先感谢:-)
'circle' 是 'bpmn.Event' 形状的一部分，检查 DOM 中的输出。对于“bpmn.Pool”，它应该是 CSS，例如'.bpmn.Pool rect {笔画：红色； }'