我们目前正在生产用于图标的PNG,但作为设计师,我正在努力推动使用SVG以获得以下好处:
a.在视网膜上渲染.
湾 视力受损的用户放大
.c.创建图标时更简单的工作流程.

有没有比较这3种方法的研究？(PNG Sprite vs SVG sprite vs Icon字体)在性能方面？

如果没有,你会比较它们的内容和方式？(例如,我听说SVG需要更多CPU能力,我不知道如何测试它或后果是什么).

非常感谢!你是一个了不起的社区.

顺便说一句,这是我能找到的:
svgs很酷,但图标字体只是文件大小的10%
SVG +图标字体:
Iconserving - SVG或Webfont？
我们从图标字体切换到SVG的十大理由

海兰

我在IE中使用flex有些麻烦:

http://jsfiddle.net/EvvBH/

请注意flex: auto,即使内容不足,#two元素也应该扩展它以填充容器.

但它只在Chrome和Firefox中实现.在IE中它根本不起作用.

是flex-grow不支持IE？

我们在响应式网站上使用OwlCarousel 1.3.3.我们将最大项目数设置为4.

$container.owlCarousel({
    items: 4,
    itemsDesktop: [1000, 4], 
    itemsDesktopSmall: [900, 3], 
    itemsTablet: [600, 2], 
    itemsMobile: [480, 1]
});

只要旋转木马包含4个或更多图像,一切正常.但是当编辑器只添加3个或更少的项目时,我们希望这些项目在页面上居中.现在他们"左对齐",看起来不太好.

选项itemsScaleUp不是我想要的.如果项目设置为4,但轮播只包含1个项目,该项目将变得太大.

我在github上发现了这些问题:
https://github.com/smashingboxes/OwlCarousel2/issues/35
https://github.com/OwlFonk/OwlCarousel/issues/417
但是没有什么我觉得有帮助.

您可以在此codepen中查看该问题.

更新:
通过OwlCarousel的来源,您将看到.owl-wrapper元素宽度乘以2.但我无法弄清楚为什么,以及是否可以安全地删除乘数.

我打开了这个github问题,试图得到一些澄清.

我需要一种方法来找到字形相对于其边界框的确切大小和位置.

我们正在使用D3.js创建一个带有标题,较小的署名和短正文的SVG.差不多这个:

Lorem存有

Lorem ipsum dolor

Lorem存有悲坐阿梅德,
consectetur adipisicing ELIT,
sed的根本eiusmod tempor
incididunt UT labore等dolore
麦格纳aliqua

在这个例子中,无论font-size如何,我都需要左对齐文本.

问题是,每个线条边界框都是对齐的而不是字形.这使标题看起来缩进.如何计算边界框和字形之间的空间,以便我可以正确对齐文本？

一位同事坐下来手动测量了这个英文字体,效果非常好.我们可以在Adobe Illustrator中执行此操作,但我们需要英文,中文和阿拉伯字体的信息.用手做这个或多或少是不可能的.

我能想到的唯一解决方案是在canvas元素中键入每个字符并映射每个像素以查看字形的开始和结束位置.

我认为理想的是一种使用SVG字体路径信息来查找极值的方法,这样我们就可以得到确切的数字而不是估计值.我们的估计有很大的误差.有没有办法用node.js做到这一点？

SVG的示例:

<svg viewBox="0,0,1008,1424" height="1052px" width="744px" version="1.1" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(50,150)" class="container">
        <g transform="translate(0,205)" class="textContainer">
            <g fill="white" font-family="serif" font-size="" class="header">
                <text>
                    <tspan y="147.7104222717285" style="" font-size="208" 
                        x="-21.8359375">Lorem ipsum</tspan>
                </text>
                <text>
                    <tspan y="201.46275431823733" style="" font-size="45" 
                        x="-4.72412109375">Lorem ipsum dolor</tspan>
                </text>
            </g>
            <g lengthAdjust="spacingAndGlyphs" textLength="297" fill="white" 
                transform="translate(0,214)" font-family="sans-serif" 
                class="paragraph" font-size="14">
                <text y="16.8" x="0">Lorem ipsum dolor sit amet,</text>
                <text y="33.6" x="0">consectetur adipisicing elit,</text>
                <text …

如何在没有SVG被Base64编码的情况下使用Stylus预处理器在CSS中嵌入SVG数据uri ？

像这样:

background: url('data:image/svg+xml;utf8,<svg>[...]</svg>');

而不是这个:

background: url('data:image/svg+xml;base64,PD94bWwg[...]');

Normaly我曾经习惯stylus.url()嵌入图像,但它也会使用Base64编码SVG.

我想使用数据uris而不是外部文件来保存文件请求.我已经意识到Base64编码SVG实际上增加了字节而不是减小大小.

我找不到按原样嵌入SVG的方法.

我有一个工作的excel工作簿,它有VBA代码和宏来帮助数据输入.

我使用日历来捕获日期并从单元格中读取数据.该应用程序100%在我的机器上运行(开发的应用程序,2007但.XLS – 97/2000为了兼容性而保存在办公室).当我将文件提供给其他人时,日历控件和TRIM()功能不起作用.

在我的机器上,我可以进入参考部分,但在办公室的所有其他机器上,references功能显示为灰色.任何想法为什么像日历这样的常见对象和常见功能trim()在某些机器上不起作用

我正在尝试使用 CSS 动画创建一个“AJAX-spinner”。

我有两个不透明度为 70% 的图层，有时会重叠。这些层具有相同的颜色。当图层完全重叠时，我想用单个图层替换它们。

我认为两层重叠会导致完全不透明的层，毕竟 70 + 70 是 140。但这显然不是不透明度的工作原理。两层重叠仍然是透明的，我不知道如何透明。

我唯一能找到的方法是计算结果颜色，但这不是我感兴趣的。我怎样才能找到结果的不透明度？

.layer1,
.layer2 {
    color: orange;
    opacity: .7;
}

.layer3 {
    color: orange;
    opacity: ??;
}

更新

小提琴来说明问题：http://jsfiddle.net/m8zEX/3/

您可以看到两个橙色方块重叠，以及颜色如何与后面的黑色方块混合。

我正在实施Bambora 的Inline Checkout.授权步骤没有任何问题.但是当涉及到捕获付款时,我总是得到错误Transaction not found.

这就是我做的:

const options = {
    headers: { Authorization: `Basic ${ apiKey }` },
};
const { payload } = {
    amount
};
const { data } = await axios.post(`https://transaction-v1.api-eu.bambora.com/transactions/${ txnid }/capture`, payload, options);

我也尝试过包含transactionoperations以下内容的请求:

const options = {
    headers: { Authorization: `Basic ${ apiKey }` },
};
const { payload } = {
    amount,
    transactionoperations: [{ id: txnid }],
};
const { data } = await axios.post(`https://transaction-v1.api-eu.bambora.com/transactions/${ txnid }/capture`, …

我正在尝试为我的 Babel 7.7 和 Webpack 4.41 构建代码启用源映射。

除了源自 node_modules 中代码的控制台语句外，源映射工作正常。这些声明主要是开发提示，当我们做错事时发出警告。对于我们自己的源代码中的控制台语句，源映射可以工作，如果第 3 方库中发生错误，它们也可以工作。

当依赖项 console.logs 时，跟踪如下所示：

Warning: a promise was rejected with a non-error: [object String]
    at eval (webpack-internal:///./src/app/bootstrap/bootstrap.js:66:13)
From previous event:
    at _callee$ (webpack-internal:///./src/app/bootstrap/bootstrap.js:65:140)
    at tryCatch (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.<computed> [as next] (webpack-internal:///../node_modules/regenerator-runtime/runtime.js:97:21)

在浏览器中检查 bootstrap.js 时，我没有完全获得构建代码，仍然应用了源映射，但我也没有获得 babel 的输出，甚至没有获得原始代码。这是介于两者之间的某种状态。

我创建了一个简单的存储库，在其中重现问题，尝试以受控方式解决它： https: //github.com/pstenstrm/webpack-sourcemap-test

Object(react_loadable__WEBPACK_IMPORTED_MODULE_9__["preloadReady"])().then(function _callee() {
  return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.async(function _callee$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case 0:
          _context.next = 2;
          return _Users_path_to_proj_node_modules_babel_runtime_corejs3_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.awrap(new bluebird__WEBPACK_IMPORTED_MODULE_1___default.a(function (a, reject) …

我为响应式网站制作了一个粘性标题,其中标题也位于中心位置margin: 0 auto.它适用于Chrome/Firefox/Safari/IE8,但不适用于IE9 +.

最小标记:

<div class="viewport">
    <header class="banner">
    </header>
</div>

风格:

.banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
}

在IE9 +中,标题卡在左侧.

在谷歌地图中是否存在类似fitBounds的百度？我在百度地图上有多个标记,我想用正确的定位和缩放级别显示所有标记.