Question

问题是如何使用数学方法并且仅通过了解START SVG信息才能从END SVG维度（无旋转）和START SVG维度（无旋转）中获取信息。从START SVG到END SVG基本上，我需要执行rotation的{{1}}。

这就是我的想法

从路径中检索每个点，然后将旋转应用于每个点

START SVG

-115.609deg

END SVG（这是我想要实现的目标，但是使用数学），这是100％准确的

<svg xmlns="http://www.w3.org/2000/svg" width="92" height="63" viewBox="0 0 92 63" fill="none">
    <path d="M90.6668 0H0L49.9325 61.7586L90.6668 0Z" fill="#6F7800" />
</svg>

Answer 1

这是在浏览器中使用JS的方法。

请注意，由于Chrome计算转换后内容的边界框的方式，因此它在 Firefox 中有效，但不适用于Chrome（可能也不适用于Safari）。

IPAddress ResolvedIpAddress = null;
GetHostIpAddressAsync("www.hfkhkhfhkf.com", this.ResolvedAddressCallback);


protected internal void ResolvedAddressCallback(IPAddress address)
{
    this.ResolvedIpAddress = address;
    //Eventually, if an UI update is needed
    this.BeginInvoke((MethodInvoker)delegate { 
        label1.Text = address != null 
                    ? ResolvedIpAddress.ToString() 
                    : "<Host not found>";
    });
}

internal static void GetHostIpAddressAsync(string sHostName, Action<IPAddress> BGHAActionCallback)
{
    IPAddress IpAddress = null;
    Dns.BeginGetHostAddresses(sHostName, new AsyncCallback((asyncResult) =>
    {
        try
        {
            IPAddress[] ipAddresses = Dns.EndGetHostAddresses(asyncResult);
            if (BGHAActionCallback != null)
            {
                if (ipAddresses.Length > 0)
                    IpAddress = ipAddresses[0];
                BGHAActionCallback?.Invoke(IpAddress);
            }
        }
        catch (Exception) { BGHAActionCallback?.Invoke(null); }
    }), null);
}

function rotateAndAdjust(elem, angle)
{
  // Rotate the element by the angle
  elem.setAttribute("transform", "rotate("+angle+")");
  // Call getBBox to get the updated bounding box
  var bbox = elem.parentElement.getBBox();
  // Use the BBox x and y to move the element back into the viewport
  elem.setAttribute("transform", "translate(" + (-bbox.x) + "," + (-bbox.y)+") rotate(" + angle + ")");
  // Convert the new width and height to integers
  var w = Math.ceil(bbox.width);
  var h = Math.ceil(bbox.height);
  // Update the viewBox
  elem.ownerSVGElement.setAttribute("viewBox", "0 0 " + w + " " + h);
  // Update the SVG width and height  
  elem.ownerSVGElement.setAttribute("width", w);
  elem.ownerSVGElement.setAttribute("height", h);
}


rotateAndAdjust( document.querySelector("path"), -115.609 );

svg {
  background: linen;
}

旋转路径后计算SVG尺寸

1 个答案: