个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试创建一个函数来测量文本元素在 SVG 元素中的大小。我在 Stack Overflow 上找到的代码示例不起作用，宽度为零。如果我延迟测量，我可以获得文本，但不是马上。这是怎么解决的？
var messureSVGtext = function(text, svg, options){
var text = document.createElementNS(svgns, 'text');
text.style.fontFamily = options.font;
text.setAttribute("style",
"font-family:" + options.font + ";" +
"font-size:" + options.fontSize + "px;"
);
var textNode = document.createTextNode(text);
text.appendChild(textNode);
svg.appendChild(text);
// This does not work
console.log(text.clientWidth);
//This does
setTimeout(function(){
console.log(text.clientWidth);
}, 100);
}最佳答案
您可以获得元素的“计算样式”，然后从中检查宽度和高度。
给元素一个id属性并将其附加到 DOM 后，试试这个:
var elem1 = document.getElementById("text_elem");
var style = window.getComputedStyle(elem1, null);
console.log(style.width, style.height);
SVG
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="640"
height="480"
viewBox="0 0 640 480"
style="display:block">
<text id="svg_text" x="20" y="50" style="font-family:Arial; font-size:36px; fill:#BADA55">Hello World!</text>
</svg>
JavaScript
function getCompStyle(oid, cbf)
{
var obj, stl, itv;
obj = document.getElementById(oid);
itv = setInterval(function()
{
stl = window.getComputedStyle(obj, null);
if (stl && (stl.width.indexOf('0') != 0))
{
clearInterval(itv);
cbf(stl);
}
},0);
}
getCompStyle('svg_text', function(style)
{
console.log(style.width);
});
要使用该示例，请将 SVG 放在您的 HTML 中 <body>和 <script> 中的 JavaScript SVG 下方的标签 - 也在 <body> 中.
关于javascript - 测量尚未在 javascript 中创建的 SVG 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36591905/
24
4
0
我读到的有关 AdSense 的所有内容都表明我需要一个我确实计划获得的网站(博客、域等)。我只是不确定我想要的域名。 但是，我想继续前进，因为来自 Google 的地址验证信可能需要数周时间。 所以
我有一个支持成就的小游戏。游戏尚未发布，但我需要测试成就。我现在可以做，但只是部分做，例如，当我执行游戏中心应用程序时，它似乎总是在沙盒模式下运行，并且该游戏未在“游戏”选项卡中列出。所以，我看不出成
我有一个 MYSQL 表 1，并希望与表 2 创建一个简单的 UNION: SELECT SomeField FROM Table1 UNION SELECT SomeField FROM Table
我希望我的角色可重用且独立。为了可重用，每个角色都按照“单层抽象”范式进行重点工作。这导致了许多小的“原子”角色，在它们之上构建了多层协调角色以提供更复杂的抽象。 为了自包含，每个角色都应该声明它对其
这个脚本有问题:click here .目前它运行良好。但是，如果我通过 w3 验证器运行它，它就不是“有效的”。我也知道这是为什么，因为整个div都在一个链接内。 我想让这个工作完全一样，但也让它得
前言: 我的核心问题与这个非常相似:How can I write a clean Repository without exposing IQueryable to the rest of my a
我正在测试 Xcode 7 的新 UI 测试功能(在 WWDC 2015 视频“UI Testing in Xcode”中介绍)。 启动时，我的应用通过更新其垂直布局约束的值将“登录面板”设置为动画:
我想在 Rails 服务器上运行 Ruby，但某个 gem 不想安装。这个 rails 程序与 ruby 2.0 不兼容，所以我想使用我安装的 ruby 1.9.3，但是我不能再 bundle
大家好， 我的问题:我想为不存在的 IP 地址启动 (tftp) 服务器。该服务器适用于 USB/RNDIS，其 IP 地址本质上仅在存在实际网络流量时才存在 - 但我想“尽早”启动服务器(例如，当
据我所知，document.getElementById('myId') 只会查找文档中已有的 HTML 元素。假设我通过 JS 创建了一个新元素，但我还没有将它附加到文档主体，是否有一种方法可以像我
我刚刚写了这段代码: // Somewhere earlier, the equivalent of this happens. std::set a; std::set b; FillMeUp(a)
我已阅读 here关于 boost:bind 的工作原理，尤其是它 - 除了其他东西 - 生成如下内容: struct unspecified_type { ... some members ..
假设我的本地存储库当前是原点之后的一个提交。假设我在我的本地存储库中提交了一个与源不冲突的更改。如何在不首先从原点 pull/merge 更改的情况下将此更改推送到原点？ 最佳答案 好的，所以你因为非
我这里有一个非常奇怪的问题...我继承了一个相当大的 ASP.NET 3.5 Webforms 元素，一个问题是当启动应用程序时，会显示登录页面 - 但没有任何样式。 ... 这是 Login.asp
我试图从 boost::spirit 规则定义的 Action 中引用一个(尚未)未知实例的成员，所以在伪代码中， 代替 double_[ref(rN) = _1]我正在寻找类似的东西 X** ppx
根据 Cast SDK Docs ，要在我需要的 Android 中使用 Cast SDK，Google Play Services Revision 15。 我在我的 SDK 管理器中没有看到 Re
我是一名优秀的程序员,十分优秀！