以下是该问题的说明(在Firefox和Chrome中测试):
<div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div>
Run Code Online (Sandbox Code Playgroud)
注意蓝色下方的额外red空间.divsvg
已经尝试过设置padding和margin两个元素0,但没有运气.
元素可以用 缩放transform: scale(sx),其中sx是(无单位)比例因子。有没有办法将元素缩小一定数量的像素(不知道其宽度)。
编辑
我想在按下按钮时调整不同大小的元素的大小,例如按钮。但是,scale(.95)在所有按钮上应用相同的比例因子,例如,会导致较大(较小)的按钮被缩放过多(小)。所以,我想做的是在绝对按下时调整所有元素的大小,即按一定数量的像素或 em 左右。
如果我只在一个标题周围的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填充相似的效果,但没有添加额外的填充.
我需要计算svg文本元素的高度和宽度.有没有办法在没有实际添加到我的页面的DOM的情况下这样做?我只需要措施而不是实际要素.
我既不使用d3也不使用Raphael,而只使用简单的JavaScript.(也许我应该使用前者之一进行计算?)
我所追求的只是一个像imagettfbboxPHP 一样的函数,但在纯JavaScript中.有这样的事吗?还是写起来容易?
因为我实际上并没有使用文本元素,所以添加它们并隐藏它们似乎很奇怪(我也读过Firefox在计算隐藏元素的bbox时遇到问题,计算SVG文本的垂直高度).但也许这是唯一的出路?在这种情况下,我是否必须使用不透明度?之后我会以某种方式破坏元素吗?
显然IE(11)存在问题relatedTarget,例如关于blur事件.IE有替代方案relatedTarget吗?
这是一个在IE中产生错误的示例:https: //jsfiddle.net/rnyqy78m/
当我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();.但是如果普通的浏览器"历史后退按钮"能够做到这一点,我会很高兴.
我试图逃避一个字符串,用于PHP中的正则表达式.到目前为止我试过:
preg_quote(addslashes($string));
Run Code Online (Sandbox Code Playgroud)
我认为我需要addslashes为了正确地说明字符串中的任何引号.然后preg_quote转义正则表达式字符.
但是,问题是引号是用反斜杠转义的,例如\'.但后来又preg_quote逃避了反斜杠,例如\\'.所以这使得报价再次没有了.切换这两个函数也不起作用,因为这会留下未转义的反斜杠,然后将其解释为特殊的正则表达式字符.
PHP中是否有一个函数来完成任务?或者怎么做呢?
我想在使用时更改图案的颜色。
例如,我想在红色描边圆圈中有一个绿色图案。
<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/)。但我不知道怎么做。
我尝试隐藏光标。在 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)
默认情况下,工具栏的上下文菜单中填充了工具栏的名称.我想通过一个额外的条目扩展这个上下文菜单.
我找到了一个扩展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
文本以外的 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)。为什么?有没有另一种方法来获得非抗锯齿?
如何创建一个形状,例如一个矩形,反转(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)
svg ×5
css ×4
html ×3
javascript ×2
svg-filters ×2
text ×2
antialiasing ×1
c++ ×1
colors ×1
contextmenu ×1
escaping ×1
events ×1
height ×1
hide ×1
mouse-cursor ×1
onblur ×1
php ×1
pushstate ×1
qt ×1
regex ×1
safari ×1
string ×1
toolbar ×1
width ×1