小编bon*_*ang的帖子

SVG Mask 使线条消失

在我下面的示例中,蒙版在绿线和蓝线上正常工作,但使水平红线完全消失。摘下面具后,红线似乎没有任何问题。这是怎么回事?

document.querySelector('button').addEventListener('click', function(){
    document.getElementById('problem-line').removeAttribute('mask')
}, false)
Run Code Online (Sandbox Code Playgroud)
<svg width="400" height="180">
  <defs>
    <g id='circle'>
      <circle r="50" cx="100" cy="100" />
    </g>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white" />
      <use xlink:href="#circle" />
    </mask>
  </defs>
  <use xlink:href="#circle" opacity='0.5' />
  <line id='problem-line' x1='100' y1='100' x2='300' y2='100' stroke='red' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='50' stroke='green' mask="url(#hole)" />
  <line x1='100' y1='100' x2='300' y2='150' stroke='blue' mask="url(#hole)" />

</svg>
<div>
  <button>Remove mask</button>
</div>
Run Code Online (Sandbox Code Playgroud)

svg mask

5
推荐指数
1
解决办法
1055
查看次数

通过index.js从文件夹导入

在我的React项目(带有Webpack)中,我的文件夹结构如下:

??? myfile.js 
??? Report
    ??? index.js
Run Code Online (Sandbox Code Playgroud)

根据我的研究,我应该能够在其中导入Report模块myfile.js

import { Report } from './Report';
Run Code Online (Sandbox Code Playgroud)

但这是行不通的。我得到了错误:

尝试导入错误:未从“ ./Report”导出“ Report”。

但是,确实如此。

import { Report } from './Report/index';
Run Code Online (Sandbox Code Playgroud)

Report/index.js有以下导出:

// export default class Report extends Component { // this was a typo
export class Report extends Component {    
  // etc
}
Run Code Online (Sandbox Code Playgroud)

我该如何解决或至少解决它?

顺便说一句,我最初使用默认的导出/导入,但是我改为了一个命名的导出/导入,希望它能有所作为。没有。

更新。真的很抱歉,但是这篇帖子最初是错误地在export default中发表的index.js。那实际上不是文件中的内容,它可能导致某些回答者走错了路。我没有更改,只是export当我从改变导入import Reportimport { Report }如我上面所说的。因此,无论在哪种情况下(名称或默认值),导入和导出都应该匹配,并且都不起作用。

javascript import export reactjs

4
推荐指数
2
解决办法
2747
查看次数

vim:从命令行删除(剪切)并放入(粘贴)

要在不预先定位光标的情况下猛拉并放置在特定行下方,可以使用以下语法::2,6t11.但是如果我想删除流程中的原始行怎么办?

顺便说一句,如果您可以指向我用于命令行文本操作的Web资源,我将不胜感激.我真的很喜欢上面引用的命令,但是我试图从中推断它并没有成功.

vim

1
推荐指数
1
解决办法
62
查看次数

D3:在转换中更改 html

在这个(损坏的)最小示例中,我希望文本淡出,在不可见时更改,并以更改后的内容重新出现。这应该很简单(没有交叉淡入淡出),但错误消息抱怨这.html不是一个函数。

<!DOCTYPE html>
<title>Image mask</title>

<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">
</script>
<body>
</body>
<script>
var textbox = d3.select('body').append('div');

textbox
	.html('Click me.')
	.style('cursor','pointer');

var i = 0;
textbox.on('click', function() {
	i++;
	textbox.transition()
		.style('opacity', 0)
	.transition().duration(300)
	.html('Click me. <strong>' + i + '</strong>')
	.transition().transition()
		.style('opacity', 1);
});
</script>
Run Code Online (Sandbox Code Playgroud)

PS我找到了一个交叉淡入淡出的例子,但它似乎没有必要复杂(因为我不想交叉淡入淡出)并且需要版本4的.active方法。

更新。如果.html替换为.text,它“有效” ,但我确实需要解析内容。

javascript transition d3.js

1
推荐指数
1
解决办法
1348
查看次数

标签 统计

javascript ×2

d3.js ×1

export ×1

import ×1

mask ×1

reactjs ×1

svg ×1

transition ×1

vim ×1