小编Dan*_*iel的帖子

如何摆脱div元素中svg下面的额外空间

以下是该问题的说明(在Firefox和Chrome中测试):

<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/EXLSF/

注意蓝色下方的额外red空间.divsvg

已经尝试过设置paddingmargin两个元素0,但没有运气.

html css svg

73
推荐指数
4
解决办法
3万
查看次数

如何使用 CSS 以像素为单位缩放元素?

元素可以用 缩放transform: scale(sx),其中sx是(无单位)比例因子。有没有办法将元素缩小一定数量的像素(不知道其宽度)。

编辑

我想在按下按钮时调整不同大小的元素的大小,例如按钮。但是,scale(.95)在所有按钮上应用相同的比例因子,例如,会导致较大(较小)的按钮被缩放过多(小)。所以,我想做的是在绝对按下时调整所有元素的大小,即按一定数量的像素或 em 左右。

css

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

小填充,差异很大

如果我只在一个标题周围的div中添加1px填充,那么这显然是一个巨大的差异(http://jsfiddle.net/68LgP/).

HTML:

<div class="pad0">
    <h1>Text</h1>
</div>
<div class="pad1">
    <h1>Text</h1>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.pad0 {
    background-color: #E9E9E9;
    padding: 0px;
}
.pad1 {
    background-color: #E9E9E9;
    padding: 1px;
}
Run Code Online (Sandbox Code Playgroud)

为什么会这样?我真的希望获得与1px填充相似的效果,但没有添加额外的填充.

html css

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

正确的方法来计算SVG文本的高度和宽度

我需要计算svg文本元素的高度和宽度.有没有办法在没有实际添加到我的页面的DOM的情况下这样做?我只需要措施而不是实际要素.

我既不使用d3也不使用Raphael,而只使用简单的JavaScript.(也许我应该使用前者之一进行计算?)

我所追求的只是一个像imagettfbboxPHP 一样的函数,但在纯JavaScript中.有这样的事吗?还是写起来容易?

因为我实际上并没有使用文本元素,所以添加它们并隐藏它们似乎很奇怪(我也读过Firefox在计算隐藏元素的bbox时遇到问题,计算SVG文本的垂直高度).但也许这是唯一的出路?在这种情况下,我是否必须使用不透明度?之后我会以某种方式破坏元素吗?

height svg text width

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

如何在IE中使用relatedTarget(或等效)?

显然IE(11)存在问题relatedTarget,例如关于blur事件.IE有替代方案relatedTarget吗?

这是一个在IE中产生错误的示例:https: //jsfiddle.net/rnyqy78m/

javascript events internet-explorer onblur

6
推荐指数
2
解决办法
4146
查看次数

在与history.history.pushState结合使用历史记录时,页面不会重新加载

当我window.history.pushState在浏览器的历史记录中返回时,我不会自动重新加载具有页面的URL ,例如通过单击"历史记录后退按钮".为什么页面不会自动重新加载?我可以改变这种行为吗?

这里有一小段代码来举例说明这个"问题":

<html>
    <head>
        <title>Location test</title>
        <script>
            function load() {
                var value = window.location.search.substr(1);
                document.getElementById('myInput').value = value;
                document.title = 'Location test - ' + value;
            }
            function set(el) {
                window.history.pushState('', '', window.location.pathname + '?' + el.value);
                document.title = 'Location test - ' + el.value;
            }
        </script>
    </head>
    <body onload="load();">
        <input id="myInput" type="text" onkeyup="set(this);">
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

只需在文本字段中写入内容,浏览器历史记录就会相应更新.单击浏览器的历史记录后退按钮不刷新页面.您必须手动刷新它.

我通过在运行的网站上插入我自己的"后退按钮"来解决这个问题window.history.back(); location.reload();.但是如果普通的浏览器"历史后退按钮"能够做到这一点,我会很高兴.

javascript browser-history pushstate

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

如何正确转义字符串以在PHP中使用正则表达式?

我试图逃避一个字符串,用于PHP中的正则表达式.到目前为止我试过:

preg_quote(addslashes($string));
Run Code Online (Sandbox Code Playgroud)

我认为我需要addslashes为了正确地说明字符串中的任何引号.然后preg_quote转义正则表达式字符.

但是,问题是引号是用反斜杠转义的,例如\'.但后来又preg_quote逃避了反斜杠,例如\\'.所以这使得报价再次没有了.切换这两个函数也不起作用,因为这会留下未转义的反斜杠,然后将其解释为特殊的正则表达式字符.

PHP中是否有一个函数来完成任务?或者怎么做呢?

php regex string escaping

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

如何在使用时更改 SVG 图案的颜色?

我想在使用时更改图案的颜色。

例如,我想在红色描边圆圈中有一个绿色图案。

<svg width="300" height="300" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="checked" width="2" height="2" stroke="black" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
        patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2"></line>
      <line x1="0" y1="0" x2="2" y2="0"></line>
    </pattern>
  </defs>
  <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)"/>
  <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/>
</svg>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/anon/pen/RVNmRY

是否可以在不必为每种颜色创建新图案的情况下这样做?

我在评论中读到,这可能可以使用过滤器(/sf/answers/1499912151/)。但我不知道怎么做。

svg colors svg-filters

5
推荐指数
2
解决办法
2548
查看次数

如何在Safari中正确隐藏光标?

我尝试隐藏光标。在 Chrome 中工作正常,但在 Safari 中却无法正常工作。每当我将光标拖动(单击+按住+移动)到光标隐藏的区域时,它就会重新出现。

HTML:

<div></div>
<span>Test</span>
Run Code Online (Sandbox Code Playgroud)

CSS:

div {
  border: 1px solid red;
  width: 100px;
  height: 100px;
  -webkit-user-select: none;
  cursor: none;
}
Run Code Online (Sandbox Code Playgroud)

https://codepen.io/anon/pen/MGeKpo

html css safari hide mouse-cursor

5
推荐指数
0
解决办法
688
查看次数

如何在qt中添加条目工具栏上下文菜单?

默认情况下,工具栏的上下文菜单中填充了工具栏的名称.我想通过一个额外的条目扩展这个上下文菜单.

我找到了一个扩展QTextEdit元素的上下文菜单的示例.

http://www.qtcentre.org/threads/35166-extend-the-standard-context-menu-of-qtextedit

但是,它使用QTextEdit类的createStandardContextMenu.但是QToolBar似乎没有那个属性:

http://doc.qt.io/qt-4.8/qtoolbar.html

编辑

显然,默认的上下文菜单是QMainWindow中的菜单.

http://doc.qt.io/qt-4.8/qmainwindow.html#createPopupMenu

不幸的是,我不知道如何添加条目.

编辑

我正在使用这个来源:

http://doc.qt.io/qt-5/qtwidgets-mainwindows-application-example.html

c++ qt contextmenu toolbar

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

如何获得 SVG 文本的“crispEdges”?

文本以外的 SVG 形状受shape-rendering可以设置为crispEdges值的属性的影响(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering)。这个值似乎关闭了抗锯齿。

但文本仅受text-rendering. 但是,这不提供crispEdges值(https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering)。为什么?有没有另一种方法来获得非抗锯齿?

svg text antialiasing text-rendering shape-rendering

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

如何用SVG中背景的倒数填充形状?

如何创建一个形状,例如一个矩形,反转(xor?)背后的所有颜色?

我尝试不成功:

<filter
id="invert">
<feColorMatrix
in="BackgroundImage"
values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/>
<feComposite
operator="in"
in2="SourceGraphic"/>
</filter>
<svg>
  <rect x="10" y="10" width="50" height="50" fill="blue"></rect>
  <rect x="20" y="20" width="50" height="50" fill="blue" style="filter: url(#invert);"></rect>
</svg>
Run Code Online (Sandbox Code Playgroud)

http://codepen.io/anon/pen/bqXPPZ

svg svg-filters

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