0

我正在将剪辑文本样式添加到dom-to-image，因为chrome必须使用-webkit-background-clip样式来暴露文本剪辑效果，但是dom-to-image使用cssText会清除-webkit-background-clip样式.

它是一个替换背景并添加背景剪辑的补丁。

const _serializeToString = XMLSerializer.prototype.serializeToString;
XMLSerializer.prototype.serializeToString = function (node) {
  return _serializeToString
    .call(this, node)
    .replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};

问题是，如果我有一个没有剪辑的背景，它就不起作用，因为这个解决方案假定所有背景渐变都需要 -webkit-background-clip 。

这是使用剪辑文本呈现的

.board-name-gradient {
  background: -webkit-linear-gradient(#ffffff, #b2b2b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.4;
  overflow: hidden;
  position: absolute;
  top: 50px;
  width: 300px;
  white-space: nowrap;
}

不需要剪辑并且它被覆盖（未渲染）

.board-setup::before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: overlay;
  z-index: 3;
}

所以我应该添加一个条件来检查是否必须添加剪辑文本：

XMLSerializer.prototype.serializeToString = function (node) {
  const value = _serializeToString.call(this, node);

  if (does not have clip text) {
    return value;
  }
  
  return value.replace(
      /background-image:/g,
      '-webkit-background-clip: text; background-image:',  // Add the -webkit-background-clip
    );
};

仅当样式应具有剪辑文本效果时，如何替换背景剪辑？

4

0 回答 0