我的图像有问题.我试图模糊图像的一部分,但我的解决方案无法正常工作.请看一下这段代码:
HTML文件
<div id="image">
<div class="blur"></div>
</div>
CSS文件
#image {
width: 940px;
height: 360px;
background-image: url('../img/photo.png');
}
#image .blur {
background-image: url('../img/photo.png');
background-position: center right;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: blur(3px);
float: right;
height: 100%;
width: 360px;
}
CSS中有可能吗？
<svg viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
<g>
<circle r="70" class="circle-back" />
</g>
</svg>
.doughnutChart{
text-align:center;
padding:50% 1em 0;
position: relative;
overflow: hidden;
> svg{
position: absolute;
top: 0;
left:0; right:0;
margin: auto;
g{ transform:rotate(270deg) translate(-88px, 200px); }
}
circle{ fill: none; }
.circle-back { stroke:#EEE; stroke-width: 5px; }
}
正如您在测试页面中看到的那样，我试图定位一个具有一定半径的响应圆，并且我希望它将自己定位在容器的中间，而不管容器的宽度如何。如果圆圈也适合容器的高度，那就更好了。
translate在g元素上使用百分比的css 似乎存在问题，这使我无法做到translate(-50%, -50%)
这是我所拥有的一个非常简化的版本，因为在我的代码中它是一个圆环图，这就是它对它进行这种rotate转换的原因
我正在使用这个 GULP 插件，它将 HTML 文件转换为 ES6 导出，这样我就可以将它们加载到我的 MVC 中的浏览器上（使用rollup捆绑器）。
基本上我有作为模块导出的页面控制器。
然后，在我的主 JS 文件中，我只需一个一个地导入所有页面控制器，如下所示（简化）：
import * as page__home from './pages/page1';
import * as page__home from './pages/page2';
...
由于这是一个SPA，我认为以某种方式将所有页面控制器导入到某个对象中会更容易，因此当要调用控制器时，我可以检查该名称是否存在于包含所有导入控制器的对象中， 或类似的东西。
或者也许有一种方法可以检查模块是否以某种方式导入？有没有更聪明的方法来做到这一点？谢谢
<body>
<div></div>
</body>
body{ -webkit-filter:blur(2px); filter:blur(2px); }
div{
background: blue;
margin: auto;
position: absolute;
right: 0;
top: 50%;
left: 0;
height:200px;
width: 200px;
transform: translateY(-50%);
}
将filter:blur(1px)(或任何其他过滤器)提供给定位元素(Firefox)的父级会使浏览器忽略子级的位置.
有没有人遇到过这种情况并知道解决这种烦恼的方法？
在FF48 beta/win7上测试过
无益的Github 讨论让我在这里提出这个问题:
更改为新的v4.0 D3之后,好像在使用d3.zoom() 块一些事件,如:
svg.call(d3.zoom()
.scaleExtent([1, 40])
.translateExtent([[-100, -100], [width + 90, height + 100]])
.on("zoom", zoomed));
document.querySelector('svg').addEventListener('mouseup', function(){ alert(1) })
单击SVG上的任何位置时不会发出任何警报.
我真的不希望这样做:
window.addEventListener("mouseup", function(e){
if( [target or target parent is the specific SVG element] ){
// do something
}
}
因为这将mouseup在窗口上引入全局非命名空间事件(此技术似乎仅适用于该window对象),并且此事件可能会在其他位置删除,或者多次发生.(封装它并不容易,或者我根本不知道如何).
关于如何mouseup在SVG上捕获事件的更好的想法？
与我的另一个问题相关:事件捕获命名空间
在Mark的回答的帮助下,这是工作演示
我是D3版本4的新用户,我在向强制定向布局中添加固定节点功能时遇到了问题.我相信这是通过将d.fixed设置为true在v3中实现的,但是我将此问题转换为与v4兼容的问题.我已经尝试添加simulation.fix,但是如果不从模拟开始修复节点,就无法将其集成到我现有的代码中.
理想情况下,我想添加一个双击侦听器来固定节点,并允许它通过拖动功能定位,然后再次双击时恢复模拟力.提前感谢您的帮助.
这是我的js:
<!--load svg-->
<svg width="1500" height="600"></svg>
<!--begin javascript for d3 forced layout-->
<script>
var svgNetwork = d3.select("svg"),
width = +svgNetwork.attr("width"),
height = +svgNetwork.attr("height");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(data1) { return data1.id; }))
.force("charge", d3.forceManyBody().strength(-1500))
.force("center", d3.forceCenter(width / 2, height / 2));
//load the node csv data and link csv data together - open node(open link(funtions for making chart))
d3.csv("nodes.csv", function (error1, data1) {
if (error1) throw error1;
console.log(data1);
d3.csv("lines.csv", function (error2, data2) {
if (error2) throw error2; …我试图将布尔值传递给我的组件，以便它可以根据图像的真假来显示图像，但我不太确定如何继续。
将布尔值传递给组件：
<SomeComponent showImage={false}/>
尝试在组件上使用它：
const TheImage = showImage => (
<div align="center">
{showImage ? (<img src={ImageIwant} alt="The image i want" width="80%" height="80%" />) : ''}
<p>Here is the image</p>
</div>);
我是新来反应的，我不知道为什么这不起作用。
我有一个包含两列的 CSS 网格。
我可能会也可能不会在第一列内呈现内容。换句话说，列 div 将始终存在，只是有时其中可能没有内容。
当第一列中没有内容时，我不希望该列占用空间，当有内容时，我希望它的最大宽度为100px。
是否可以单独通过 CSS 网格定义来做到这一点？
#container {
display: grid;
grid-template-columns: minmax(auto, 100px) auto;
grid-gap: 5px;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #c0c0c0;
}<div id="container">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div>
Placeat, rerum illo eligendi, hic eum magnam quo architecto necessitatibus sunt sequi repellendus suscipit fuga tenetur atque corrupti modi saepe! Iusto, provident.
</div>
</div>除 Rollup 之外，Webpack 的 sass-resource-loader是否有等效项？
我希望能够在每个文件中使用全局定义的sass 变量.scss，而不必将它们全部导入到每个文件的顶部。
谢谢！
我有一个滑块，如果滑块有多个图像，我只想显示箭头。
我在回报中尝试了类似以下的内容
{(this.state.images > 1)
<LeftArrow goToPrevSlide={this.goToPrevSlide} />
<RightArrow goToNextSlide={this.goToNextSlide} />
}
我得到以下信息 Parsing error: Unexpected token, expected "}"