Question

我最近从@codepen提取了一个提示，并使用WITH ['graph', 'server' ,'db'] as names MATCH p=(a)-[rels:NEXT*]->(b) WHERE ALL(n in nodes(p) WHERE n.name in names) AND ALL( r in rels WHERE rels[0]['seqid'] = r.seqid ) WITH names, p, a, rels, b // check if b is a subsequence node instead of an end node OPTIONAL MATCH (b)-[rel:NEXT]->(c) WHERE c.name in names AND rel.seqid = rels[0]['seqid'] // remove any existing matches where b is a subsequence node WITH names, p, a, rels, b, c WHERE c IS NULL WITH names, p, a, rels, b // check if a is a subsequence node instead of a start node OPTIONAL MATCH (d)-[rel:NEXT]->(a) WHERE d.name in names AND rel.seqid = rels[0]['seqid'] // remove any existing matches where a is a subsequence node WITH p, a, b, d WHERE d IS NULL RETURN p, a as startNode, b as endNode和<symbol/>尝试使用更便携的svg。大多数情况下它不会渲染，但在某些地方它确实如此。考虑：

<use/>

DOM中的行约为5级（fwiw）。

FF和Chrome拒绝渲染 - 我已检查过广告拦截器已停用等等。

Opera愉快地呈现。

我可以拉＆＃34; componentDiv＆＃34;进入一个简单的htmlboiler页面，它将呈现。

我也尝试将符号块定位为正文＆gt;孩子没有效果。

有什么想法吗？

Answer 1

解决方法：

似乎这个FF，Chrome问题已经影响了many一段时间。

我的解决方法只是将.svg用于<img/>标记，而不是内联<svg/>块。其中，xling：href值已更改。

自：

<svg> <symbol id="symbol-id">...</symbol> ... </svg> <svg> <use xlink:href="#symbol-id></use> </svg>

要：

<img src="path/to/svg-markup.svg"/> <svg> <use xlink:href="path/to/svg-markup#symbol-id></use> </svg>

Answer 2

我遇到了一个非常类似的问题，但url()内部symbol位于svg标记内，其中 "display: none" 风格。

可能的解决方法：使用特殊规则设置隐藏原始svg代码而不是display: none：

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

以下是两个类的示例：尝试更改类＆＃34;隐藏＆＃34;到＆＃34;视觉隐藏＆＃34;：https://codepen.io/mcmimik/pen/RyXNQR

Finicky Inline SVG，<symbol> with <use>无法显示/渲染

2 个答案: