无法获取 SVG 样式的 CSS

Question

我从服务器获取SVG数据svgData为字符串。

这将返回(对于我正在使用的示例.svg(62 个路径：

var svgPath = $(svgData).find('[class*="style"]');

使用以下代码，我正在重新计算 SVG 的笔画大小：

for (var i = 0; i < svgPath.length; ++i) {
  oldStrokeWidth.push(jQuery(svgPath[i]).css('stroke-width').replace(/[^-d.]/g, ''));
  var newStrokeWidth = oldStrokeWidth[i] * 1.1;
  jQuery(svgPath[i]).css(
    'stroke-width', newStrokeWidth
  );
  oldStrokeWidth[i] = newStrokeWidth;
}

在oldStrokeWidth数组中没有 62 个零。

我将错误追溯到这部分

jQuery(svgPath[i]).css('stroke-width')

它为每条路径提供""。

如果我手动添加jQuery(svgPath[i]).css('stroke-width', 50)并再次检查，我会得到正确的"50px"答案。所以我看起来它是空的，不包含值。工作时，我希望 0.5 或像素值作为答案。

以下是 SVG 的样式部分：

<defs>
  <style type="text/css"><![CDATA[
   .normal {
     stroke: black
   }
  .dimension {
    stroke: green
   }
  .cosmetic {
    stroke: blue
   }
  .centerLine {
    stroke: red
   }
  .style0 {
     stroke-width: 0.5
   }
  .style1 {
     stroke-width: 0.35
   }
 .style2 {
     stroke-width: 0.35; stroke-opacity: 0.2;
   stroke-dasharray: 2,1
 }
.style3 {
   stroke-width: 0.35;
   stroke-dasharray: 0.4,1,2,1
}
.style10 {
   stroke-width: 0.35;
   stroke-dasharray: 2,1
}
]]></style>
</defs>
 </svg>

也许有人知道为什么会这样。

Answer 1

如果从 .css("笔触宽度"( 获取 "，则链接替换也将返回 "。

因此，在旧的StrokeWidth数组中结束NaN的唯一方法是this._svgZoomFactor未定义。发生的情况是：

" 转换为 0，如果"this"不是指正确的对象，那么您最终将得到未定义this._svgZoomFactor。未定义的 * " 将计算为 NaN。

检查"this"是否指的是您的构造函数。

编辑：我认为您没有提供您是否正在对作为文档树一部分的SVG进行DOM操作。 Jquery .css将在内部使用getComputedStyle，如果尚未附加svg，它将返回"。但是当你设置样式时，它会在元素上单独设置 style 属性，这解释了为什么你首先得到 "，但你可以稍后设置它。