小编Ale*_*nik的帖子
fill-rule ="evenodd"如何在一个明星SVG上工作
当我试图fill-rule在SVG中理解时,我看到了以下的svg形状
<div class="contain-demo">
<svg width="250px" height="250px" viewBox="0 0 250 250">
<desc>Yellow star with intersecting paths to demonstrate evenodd value.</desc>
<polygon fill="#F9F38C" fill-rule="evenodd" stroke="#E5D50C" stroke-width="5" stroke-linejoin="round" points="47.773,241.534 123.868,8.466 200.427,241.534 7.784,98.208 242.216,98.208 " />
</svg>
</div>
请注意以下事项:
- SVG只有一条路径.
- SVG有交叉点.
- 如果我改变fill-rule ="nonzero",则整个SVG得到填充.
- 目前应用了fill-rule ="evenodd",SVG的中心区域无法填充.
为什么fill-rule="evenodd"星形SVG的中心部分没有被填充？
我确实阅读了规范 fill-rule="evenodd"
此值通过将光线从该点绘制到任何方向的无穷大并计算光线穿过的给定形状的路径段数来确定形状中点的"内部度".如果这个数字是奇数,则该点在内部; 如果均匀,那么这一点就在外面.
但我仍然不明白为什么当我申请时fill-rule="evenodd",明星的中间没有填满.有人可以解释一下吗？
推荐指数
解决办法
查看次数
如何调试用ES6编写的模态插件的源代码？
我正在尝试编辑/理解用ES6编写的模态插件的源代码,链接在这里.
<div aria-hidden="true" class="modal micromodal-slide" id="modal-1">
<div class="modal__overlay" data-micromodal-close="" tabindex="-1">
<div aria-labelledby="modal-1-title" class="modal__container" role="dialog">
<header class="modal__header">
<h2 class="modal__title" id="modal-1-title">Micromodal</h2>
<button aria-label="Close modal" class="modal__close" data-micromodal-close=""></button>
</header>
<main class="modal__content" id="modal-1-content">
<p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.</p>
</main>
<footer class="modal__footer">
<button class="modal__btn modal__btn-primary">Continue</button> <button aria-label="Close this dialog window" class="modal__btn" data-micromodal-close="">Close</button>
</footer>
</div>
</div>
</div>
// Button that triggers the modal
<a data-micromodal-trigger="modal-1" href="#">Toggle</a>
// I am importing …推荐指数
解决办法
查看次数
如何为动画持续时间较短的元素制作连续动画[GASP]
我有以下GASP动画:
$(function () {
var tmax_options = {
repeat: -1
};
var tmax_tl = new TimelineMax(tmax_options),
tween_options_to = {
css: {
rotation: 360,
transformOrigin: 'center center'
},
ease: Cubic.Linear,
force3D: true
};
// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
.to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
.to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
.to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
});
现在我想在上面的动画中发生的是最外面的多边形应该旋转(总共找到它们).所有4应以不同的速度旋转,并应连续旋转而不停止.
截至目前,我的动画代码如下所示:
tmax_tl.to($('svg > path'), …推荐指数
解决办法
查看次数
如何调试react.js库
我已经使用反应大约一年了,我最近想深入研究react-beautiful-dnd.我过去为vanilla js和jQuery构建了插件,但我不确定如何构建react.js插件甚至调试它.我更感兴趣的是调试这个插件,看看它是如何工作的,那么我究竟是怎么做的呢？
通常有一个JS插件,它主要是一个文件,所以每个函数里面的console.log会让你清楚地了解为什么以及什么时候触发某个函数,你会如何使用react.js插件做同样的事情？
推荐指数
解决办法
查看次数
使用gulp检查根目录中所有html文件中的空链接或空白链接
我的项目根目录中有很多HTML文档.我们来看一个简单的骨架HTML文档,如下所示:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<a href="#">hello</a>
<a href="">hello</a>
<a href="#">hello</a>
<a href="">hello</a>
<a href="#">hello</a>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
在我将所有这些文件发送给开发团队之前,我被分配了一个任务,即检查没有没有href的链接,空的href,或者有一个空片段作为href.也就是说,
基本上,没有像这样的喜欢:
<a href="">
要么 …
推荐指数
解决办法
查看次数
为什么简单的flexbox居中代码在safari 5和6中不起作用？
嘿家伙我最近在这里建立了这个网站,我使用flexbox和autoprefixer在这个网站上调整了很多东西.
现在,尽管我使用autoprefixer,我的客户端发送了以下其中一个部分的屏幕截图:
如您所见,图像未在圆心对齐.在所有最近的浏览器和IE 10+中都不是这种情况,在最近的浏览器中一切正常.
从访问多个SO线程后我可以收集到的是甚至safari 5+支持flex前缀.所以我不知道为什么我的flex代码不起作用.
HTML:
<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
<a href="">
<img src="images/focus-feature-points/2.jpg" alt="focus point">
</a>
<figcaption>
<h3>Engaging Educational Games</h3>
</figcaption>
</figure>
<a>标签的CSS 如下:
.focus-point > a {
overflow: hidden;
position: relative;
border-radius: 50%;
border: 3px solid;
display: inline-block;
height: 260px;
width: 260px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-left: auto;
margin-right: auto;
-webkit-transition: all .3s;
transition: all .3s;
}
我的客户端使用的safari版本是safari 5.1.10.
那么有人可以解释为什么尽管我使用前缀代码我的flexbox代码仍然不起作用？ …
推荐指数
解决办法
查看次数
ES6 set 中的键和值相同吗？
我刚刚浏览了set的 MDN 文档，以及它是如何工作的，来到如何迭代 set 的部分，我看到了以下示例：
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet) console.log(item);
和
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
for (let item of mySet.values()) console.log(item);
和
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}
//(key and value are the same here)
for (let [key, value] of mySet.entries()) console.log(key);
只是为了确认，这是否意味着使用 set 时键和值是相同的？
推荐指数
解决办法
查看次数
构建工具和任务管理器之间的区别
我一直在使用构建工具(Gulp/Grunt),主要用于基本的CSS | JS | HTML缩小/格式化/图像优化/观察我的SCSS等的变化
但是Build工具和任务运行器之间究竟有什么区别？
推荐指数
解决办法
查看次数
如何使用爬虫抓取网站的所有内部网址？
我想在 node.js 中使用爬虫来爬取网站中的所有链接（内部链接）并获取每个页面的标题，我在 npm crawler上看到了这个插件，如果我检查文档，则有以下示例：
var Crawler = require("crawler");
var c = new Crawler({
maxConnections : 10,
// This will be called for each crawled page
callback : function (error, res, done) {
if(error){
console.log(error);
}else{
var $ = res.$;
// $ is Cheerio by default
//a lean implementation of core jQuery designed specifically for the server
console.log($("title").text());
}
done();
}
});
// Queue just one URL, with default callback
c.queue('http://balenol.com');
但我真正想要的是抓取网站中的所有内部网址，并且是内置在这个插件中还是需要单独编写？我在插件中没有看到任何选项可以访问站点中的所有链接，这可能吗？
推荐指数
解决办法
查看次数
什么是 .esm.js 文件，什么是格式：rollup.js 中的“es”？
我只是在这里浏览这个库(glide.js) ，因为我正在检查 package.json 文件，我在密钥下看到以下命令scripts：
"build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",
这个脚本到底在做什么？我知道一个配置文件在这里被传递给 rollup.js，但是.esm? 当我看到dist/文件夹时，我也看到了一个glide.esm.js文件，这个文件到底在做什么？
esm 的构建配置文件如下所示：
import build from './build'
export default Object.assign(build, {
input: 'entry/entry-complete.js',
output: Object.assign(build.output, {
file: 'dist/glide.esm.js',
format: 'es'
})
})
但我不太明白format: 'es'这里的真正含义。基本上分解一下，文件夹中的文件glide.js和glide.esm.js文件dist/夹中的文件有什么区别？
推荐指数
解决办法
查看次数