Javascript SVG模式不转换缩放图像

我知道这里有几个关于缩放

和在所述元素中心排序的问题，但我有一个稍微不同的问题

我的问题是我有一个

，其中包含我的

，因为它是动态应用于其他SVG的。我使用

patternTransform

属性来缩放和转换带有矩阵的图像（而不是单个变换）。我需要围绕图像中心缩放图像，尽管我的理解是，

是其内容的无限画布

我已经试过了概述的技巧

链接摘要
X=centreX*（比例系数-1）
Y=中心*（比例系数-1）

这无疑对图像的翻译方式产生了影响，但其来源看起来更像是从上/左上方开始的15%，而不是谚语中的中心位置

当图像位于

中并用作

填充时，如何缩放图像而不进行转换

下面是我用来缩放图像的代码和它的行为的gif

模式定义

<pattern id="user_image_container" patternUnits="objectBoundingBox" x="0" y="0">
  <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/8a/Free_Unedited_Happy_Little_Yellow_Stars_in_Pink_Flower_Creative_Commons_(2898759838).jpg" id="user_image"></image>
</pattern>



控制矩阵的Javascript

/**
 * Scale the image. Called by an input event from an input[type="range"]
 * @param  {Event} event calling this function.
 * @return {void}
 */
update_image_scale: function update_image_scale(event) {
  // Stop anything automatic from happening.
  event.preventDefault()

  // Get the input and previous value.
  const target_input = $(event.target)
  const target_size = parseFloat(target_input.val())
  const image_size = App.canvas_view.image_size // Original size of the image.

  // Get the target <pattern>.
  const target_image = $("#user_image_container").get(0)

  // Get the centred X/Y position of the image.
  const cx = parseFloat(target_image.getAttribute("data-x") || 0) + (image_size.width / 2)
  const cy = parseFloat(target_image.getAttribute("data-y") || 0) + (image_size.height / 2)

  // Get the new translation position.
  const x = -cx * (target_size - 1)
  const y = -cy * (target_size - 1)

  console.log(x, y)

  // Set the new X/Y position.
  target_image.setAttribute("data-x", x)
  target_image.setAttribute("data-y", y)

  // Redraw the image.
  $("#user_image_container").get(0).setAttribute("patternTransform", `matrix(${target_size} 0 0 ${target_size} ${x} ${y})`)
},

/**
*缩放图像。由输入事件从输入[type=“range”]调用
*@param{Event}Event调用此函数。
*@return{void}
*/
更新图像比例：功能更新图像比例（事件）{
//阻止任何自动发生的事情。
event.preventDefault（）
//获取输入和上一个值。
const target_input=$（event.target）
const target_size=parseFloat（target_input.val（））
const image\u size=App.canvas\u view.image\u size//图像的原始大小。
//抓住目标。
const target_image=$（“#用户_image_容器”）.get（0）
//获取图像的中心X/Y位置。
const cx=parseFloat（target_image.getAttribute（“data-x”）| | 0）+（image_size.width/2）
const cy=parseFloat（target_image.getAttribute（“data-y”）| | 0）+（image_size.height/2）
//获得新的翻译职位。
常数x=-cx*（目标大小-1）
常数y=-cy*（目标大小-1）
console.log（x，y）
//设置新的X/Y位置。
target_image.setAttribute（“数据-x”，x）
target_image.setAttribute（“数据y”，y）
//重新绘制图像。
$（“#user_image_container”）.get（0）.setAttribute（“patternTransform”，矩阵（${target_size}0 0${target_size}${x}${y}）`）
},

下面是它目前的表现（很抱歉看到这么大的gif）：

这是由
输入[type=“range”]
输入事件控制的，当刻度变为>2时，它开始变得疯狂。

我把这个单独放了几天后，终于用上了

将
集中在
中的方法是，不要尝试（逻辑上）使用
以
翻译为基础，而实际上使用
以
翻译为基础

即

矩阵控制器现在是单个变换

  /**
   * Render the image with all transforms.
   * @return {void}
   */
  render_image_in_pattern: function render_image_in_pattern() {
    // Get the target image.
    const target = this.$("#user_image_container").get(0)

    // Get the image coordinates.
    const sx = parseFloat(target.getAttribute("data-scale-x")) || 0
    const sy = parseFloat(target.getAttribute("data-scale-y")) || 0
    const x = parseFloat(target.getAttribute("data-x")) || 0
    const y = parseFloat(target.getAttribute("data-y")) || 0

    // Get the rotation.
    const r = this.rotation || 0

    // Get the scale from the range field.
    const s = $(".image-scaler").val()

    // Translate the image.
    $("#user_image_container").get(0)
      .setAttribute("patternTransform", `translate(${sx} ${sy}) rotate(${r}) scale(${s}) translate(${x} ${y})`)
  },

data-x
和
data-y
属性由另一个函数设置，用于拖放

  /**
   * Render the image with all transforms.
   * @return {void}
   */
  render_image_in_pattern: function render_image_in_pattern() {
    // Get the target image.
    const target = this.$("#user_image_container").get(0)

    // Get the image coordinates.
    const sx = parseFloat(target.getAttribute("data-scale-x")) || 0
    const sy = parseFloat(target.getAttribute("data-scale-y")) || 0
    const x = parseFloat(target.getAttribute("data-x")) || 0
    const y = parseFloat(target.getAttribute("data-y")) || 0

    // Get the rotation.
    const r = this.rotation || 0

    // Get the scale from the range field.
    const s = $(".image-scaler").val()

    // Translate the image.
    $("#user_image_container").get(0)
      .setAttribute("patternTransform", `translate(${sx} ${sy}) rotate(${r}) scale(${s}) translate(${x} ${y})`)
  },