小编shi*_*xis的帖子

想解释之间有什么区别的offsetHeight,clientHeight和scrollHeight或offsetWidth,clientWidth和scrollWidth？

在客户端工作之前必须知道这种差异.否则他们的一半生命将用于修复UI.

小提琴或下面的内联:

function whatis(propType) {
  var mainDiv = document.getElementById("MainDIV");
  if (window.sampleDiv == null) {
    var div = document.createElement("div");
    window.sampleDiv = div;
  }
  div = window.sampleDiv;
  var propTypeWidth = propType.toLowerCase() + "Width";
  var propTypeHeight = propType + "Height";

  var computedStyle = window.getComputedStyle(mainDiv, null);
  var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
  var borderTopWidth = computedStyle.getPropertyValue("border-top-width");

  div.style.position = "absolute";
  div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px"; …

为什么转换属性在D3中不适用于DIV？它适用于任何svg元素,但不适用于"div".任何替代方案？

不工作

d3.select("div")
  .transition()
  .style("transform","translate(0px,-500px)");

工作

d3.select("circle")
  .transition()
  .style("transform","translate(0px,-500px)");

有没有办法使用过滤器或SVG中的任何方法将图案和渐变一起应用于元素？

我不想创建重复的元素（任何形状）来实现这一点。它的维护开销。

下图是我预期输出的示例。

<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
<defs>
    <pattern id='tile' patternUnits='userSpaceOnUse' width='75' height='75' viewBox='0 0 50 50'>
        <line x1='1' y1='0' x2='51' y2='50' stroke='#19203d' stroke-width='2'/>
        <line x1='49' y1='0' x2='-1' y2='50' stroke='#19203d' stroke-width='2'/>
        <line x1='50' y1='0' x2='0' y2='50' stroke='#313763' stroke-width='2'/>
        <line x1='0' y1='0' x2='50' y2='50' stroke='#313763' stroke-width='2'/>
    </pattern>
    <radialGradient id='l' cx='50%' cy='200%' fy='0' r='201%'>
        <stop offset='0%' style='stop-color:#fff; stop-opacity:.1;' />
        <stop offset='10%' style='stop-color:#000; stop-opacity:0.1;' />
        <stop offset='30%' style='stop-color:#000; stop-opacity:0.3;' />
        <stop offset='90%' style='stop-color:#000; stop-opacity:0.55;' />
        <stop offset='100%' style='stop-color:#000; stop-opacity:.6' />
    </radialGradient>
</defs>
<rect …