Почему при применении фильтра svg фигуры съезжают и как это исправить?

#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) => );

    }

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

    render() {
      return (
      

         
      
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));







Большой круг должен стоять на месте, а он движется.

Какой фильтр использовать для svg фигур?? Или как исправить, без костылей, feImage?
    

Ответы

Ответ 1

Все оказалось довольно просто.  по умолчанию имеет следующие атрибуты:

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%"











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) => );

    }

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

    render() {
      return (
      

         
      
    );
  }
}


ReactDOM.render( < App / > , document.getElementById('root'));







Спасибо большое Paul LeBeau

Этот же вопрос на англоязычном stackoverflow