React realisiert den gesamten Prozess des Seitenwasserzeicheneffekts

React von „react“ importieren
ReactDOM von „react-dom“ importieren
importiere './index.css'
Importieren Sie WaterMarkContent aus „./components/WaterMarkContent“.
App aus „./App“ importieren

ReactDOM.render(
  <Reagieren.StrictMode>
    <Wasserzeicheninhalt>
      <App />
    </Wasserzeicheninhalt>
  </React.StrictMode>,
  document.getElementById('root')
)

  const { text = 'Wasserzeichen', Schriftgröße = 16, Füllopacity = '0,2', Füllfarbe = '#000' } = Requisiten
  const res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="180px" viewBox="0 0 180 180">
        <text x="-100" y="-30" füllen='${fillColor}' transformieren = "drehen(-35 220 -220)" füllen-opacity='${fillOpacity}' Schriftgröße='${fontSize}'> ${text}</text>
      </svg>`

 const blob = neuer Blob([res], {
    Typ: 'image/svg+xml',
  })

 const url = URL.createObjectURL(blob)

    <div
      Stil={{
        Position: 'absolut',
        Breite: '100%',
        Höhe: '100%',
        Hintergrundbild: `url(${url})`,
        oben: 0,
        links: 0,
        zIndex: 999,
        pointerEvents: 'none', //durchklicken}}
    ></div>

React von „react“ importieren
importiere { ReactNode, useMemo } von 'react'

Typ svgPropsType = {
  Text?: Zeichenfolge
  Schriftgröße?: Zahl
  fillOpacity?: Zahl
  Füllfarbe?: Zeichenfolge
}
const SvgTextBg = (props: svgPropsType) => {
  const { text = 'Wasserzeichen', Schriftgröße = 16, Füllopacity = '0,2', Füllfarbe = '#000' } = Requisiten
  const res = `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="180px" viewBox="0 0 180 180">
        <text x="-100" y="-30" füllen='${fillColor}' transformieren = "drehen(-35 220 -220)" füllen-opacity='${fillOpacity}' Schriftgröße='${fontSize}'> ${text}</text>
      </svg>`

  const blob = neuer Blob([res], {
    Typ: 'image/svg+xml',
  })

  const url = URL.createObjectURL(blob)

  zurückkehren (
    <div
      Stil={{
        Position: 'absolut',
        Breite: '100%',
        Höhe: '100%',
        Hintergrundbild: `url(${url})`,
        oben: 0,
        links: 0,
        zIndex: 999,
        pointerEvents: 'none', //durchklicken}}
    ></div>
  )
}

Typ Requisitentyp = {
  Kinder?: ReactNode
} & Teilweise<svgPropsType>

const WaterMarkContent = (Eigenschaften: Eigenschaftstyp) => {
  const { Text, Schriftgröße, Füllopacity, Füllfarbe } = Requisiten

  const memoInfo = useMemo(
    () => ({
      Text,
      Schriftgröße,
      Füllopacity,
      Füllfarbe,
    }),
    [Text, Schriftgröße, Füllopacity, Füllfarbe]
  )
  zurückkehren (
    <div Stil={{ Position: 'relativ', Breite: '100%', Höhe: ' 100%' }}>
      {props.children}
      <SvgTextBg {...memoInfo} />
    </div>
  )
}

Standard-Wasserzeicheninhalt exportieren