zextra/src/svg/elements/ZikoSvgElement.js

***Zextra*** stands for "Ziko Extra" is an extension package that enhances [ZikoJS](https://github.com/zakarialaoui10/ziko.js) by providing additional utilities and UI elements. It expands ZikoJS with extra features, making it easier to work with custom U

import { ZikoUIElement } from "ziko";
class ZikoSvgElement extends ZikoUIElement{
  constructor(type) {
    super()
    Object.assign(this.cache,{
      type
    })
  }
  pos(x,y){
    return this.posX(x).posY(y);
  }
  posX(x){
    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
    else this.element.x.baseVal.value=x;
    return this;
  }
  posY(y){
    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
    else this.element.y.baseVal.value=y;
    return this;
  }
  translate(x,y){
    return this;
  }
  color({ stroke, fill }) {
    this.element?.setAttribute("stroke", stroke);
    this.element?.setAttribute("fill", fill);
    return this;
  }
  fill(color = "none") {
    this.element?.setAttribute("fill", color);
    return this;
  }
  stroke(color = "none", width) {
    this.element?.setAttribute("stroke", color);
    width && this.strokeWidth(width);
    return this;
  }
  strokeWidth(width = 1) {
    this.element?.setAttribute("stroke-width", width);
    return this;
  }
  opacity(value = 1) {
    this.element?.setAttribute("opacity", value);
    return this;
  }
}
export default ZikoSvgElement;