主页 / 问题 / 897856
Accepted
Igor
Asked:2020-10-25 22:07:13 +0000 UTC2020-10-25 22:07:13 +0000 UTC

为什么在应用 svg 过滤器时形状会移出以及如何修复它？

  • 772

我想对形状做一个例外。这是我使用过滤器的地方：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">

  <defs>
    <filter id="myFilter1">
      <feImage href="#1" result="1"/>
      <feImage href="#2" result="2"/>
      <feComposite in="1" in2="2" operator="xor"/>
    </filter>
  </defs>
  
  <g filter="url(#myFilter1)">
    <circle id="2" cx="50" cy="50" r="50"/>
    <g id="1">
      <rect x="0" y="0" width="50" height="50" fill="#ccc"/>
      <rect x="50" y="50" width="50" height="50" fill="#ccc"/>
    </g>
  </g>
</svg>

这是没有过滤器的：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <g>
    <circle id="2" cx="50" cy="50" r="50"/>
    <g id="1">
      <rect x="0" y="0" width="50" height="50" fill="#ccc"/>
      <rect x="50" y="50" width="50" height="50" fill="#ccc"/>
    </g>
  </g>
</svg>

如您所见，应用过滤器时，形状会移出。为什么会发生这种情况以及如何解决？

偶然间，我发现这件事在feImage. 并且偏移量还取决于元素的数量及其位置。使元素的位置从鼠标的位置改变：

const value = (max = 100000000, min = 0) => Math.round(Math.random() * (max - min)) + min;

const createCircle = (size) => {
  const r = value(10, 3);
  const cx = value(size - r - 10, r + 10);
  const cy = value(size - r - 10, r + 10);
  return {
    r,
    cx,
    cy
  }
};

const createCircles = (counts, size) => Array(counts).fill().map(() => createCircle(size));


class App extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        position: {
          x: 0,
          y: 0,
        }
      };

      this.size = 300;

      this.circlesData = createCircles(100, this.size);

      const getCoords = (c, i) => c + (this.state.position.x * 0.002 * c * (i % 2 ? 1 : -1));

      this.circles = () => this.circlesData.map((item, i) => <circle key = {`circles_12dew1_${i}`} cx={getCoords(item.cx, i)} cy={getCoords(item.cy, i)} r={item.r}/>);

    }

    onMouseMove = e => {
      const position = {
        x: e.pageX,
        y: e.pageY,
      };
      this.setState({position});
    }

    render() {
      return (
      <div className = "App" >
        <svg onMouseMove={this.onMouseMove} ref = {elem => this.svg = elem} xmlns = "http://www.w3.org/2000/svg" width = {this.size} height = {this.size} viewBox={`0 0 ${this.size} ${this.size}`}>
          
          <defs>
            <filter id="myFilter1">
             <feImage href="#1" result="1"/>
             <feImage href="#2" result="2"/>
             <feComposite in ="1" in2="2" operator="xor"/>
            </filter>
 
          </defs>

          <g id = "3" filter = "url(#myFilter1)" >
            <circle id = "2" cx={this.size / 2 + 100} cy={this.size / 2 + 100} r={this.size / 3}/>
            <g id="1"> {this.circles()} </g> 
          </g>
        </svg> 
      </div>
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

大圆圈应该静止不动，但它会移动。

什么过滤器用于 svg 形状？或者如何在没有拐杖的情况下修复它feImage？

svg

1 个回答

  1. Best Answer

    一切都变得非常简单。<feImage>默认情况下，它具有以下属性：

    x="-10%" y="-10%" width="120%" height="120%"

    正因为如此，图像发生了变化。

    https://www.w3.org/TR/SVG11/single-page.html#filters-feImageElement

    您需要设置以下属性，一切都会正常工作：

    x="0" y="0" width="100%" height="100%"


    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">

  <defs>
    <filter id="myFilter1">
      <feImage href="#1" x="0" y="0" width="100%" height="100%" result="1"/>
      <feImage href="#2" x="0" y="0" width="100%" height="100%" result="2"/>
      <feComposite in="1" in2="2" operator="xor"/>
    </filter>
  </defs>
  
  <g filter="url(#myFilter1)">
    <circle id="2" cx="50" cy="50" r="50"/>
    <g id="1">
      <rect x="0" y="0" width="50" height="50" fill="#ccc"/>
      <rect x="50" y="50" width="50" height="50" fill="#ccc"/>
    </g>
  </g>
</svg>

    const value = (max = 100000000, min = 0) => Math.round(Math.random() * (max - min)) + min;

const createCircle = (size) => {
  const r = value(10, 3);
  const cx = value(size - r - 10, r + 10);
  const cy = value(size - r - 10, r + 10);
  return {
    r,
    cx,
    cy
  }
};

const createCircles = (counts, size) => Array(counts).fill().map(() => createCircle(size));


class App extends React.Component {

    constructor(props) {
      super(props);

      this.state = {
        position: {
          x: 0,
          y: 0,
        }
      };

      this.size = 300;

      this.circlesData = createCircles(100, this.size);

      const getCoords = (c, i) => c + (this.state.position.x * 0.002 * c * (i % 2 ? 1 : -1));

      this.circles = () => this.circlesData.map((item, i) => <circle key = {`circles_12dew1_${i}`} cx={getCoords(item.cx, i)} cy={getCoords(item.cy, i)} r={item.r}/>);

    }

    componentDidMount() {
      this.svg.addEventListener('mousemove', e => {
        const position = {
          x: e.pageX,
          y: e.pageY,
        };
        this.setState({position})
      });
    }

    render() {
      return (
      <div className = "App" >
        <svg ref = {elem => this.svg = elem} xmlns = "http://www.w3.org/2000/svg" width = {this.size} height = {this.size} viewBox={`0 0 ${this.size} ${this.size}`}>
          
          <defs>
            <filter id="myFilter1">
             <feImage x="0" y="0" width="100%" height="100%"  href="#1" result="1"/>
             <feImage x="0" y="0" width="100%" height="100%"  href="#2" result="2"/>
             <feComposite in ="1" in2="2" operator="xor"/>
            </filter>

            <filter id="myFilter2">
              <feImage x="0" y="0" width="100%" height="100%"  href="#4" result="1"/>
              <feImage x="0" y="0" width="100%" height="100%"  href="#3" result="2"/>
              <feComposite in="1" operator="in"/>
            </filter> 
          </defs>

          <g id = "3" filter = "url(#myFilter1)" >
            <circle id = "2" cx={this.size / 2 + 100} cy={this.size / 2 + 100} r={this.size / 3}/>
            <g id="1"> {this.circles()} </g> 
          </g>
        </svg> 
      </div>
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));
    <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

    谢谢保罗·勒博

    关于英语stackoverflow的相同问题

    • 3

相关问题