Question

学习SVG / snap。在一些帮助下，我可以从地图中提取区域并将其加载到每the fiddle here.

的模态

我现在正试图将SVG保持在return '<p>' + data.name + ' - ' + getProviders(data) + </p>'乘'<p>' div，保持其纵横比，并进行缩放，因此模态中的每个区域都适合上面的框但仍保留到规模对其他地区。

</p>'

我尝试在bbox中处理数据以创建比例，但失败了。

function(data) {
  let imgProviders = _.keys(data.url).map((r) => {
    return {[r]: data.url[r]};
  });
  let url = imgProviders[0][_.keys(imgProviders[0])[0]].replace(/\/$/, '');
  let selector = _.find(sites, {
    providerName: _.keys(imgProviders[0])[0]
  }).coverIMG;

  let body = request.get(url, (err, res, html) => {
    $ = cheerio.load(html);
    // the variable that is messing with me 
    let img = $(selector).attr('src');
    // works fine when console.log()
    console.log(img, data.name, getProviders(data));
    return '<p>' + img + data.name + ' - ' + getProviders(data) + '</p>';
  });
}

Answer 1

只需添加

.modal-body svg {
  max-width: 100%;
  max-height: 100%;
}

https://jsfiddle.net/0djhebes/7/

Answer 2

你只需要CSS的强大功能：D

你需要通过css HEIGHT＆amp; amp;来定义模态内的SVG＃svg-region。您希望它们以最大值出现的宽度。例如100px＆amp; 100px，它们将在该框内呈现

#svg-region{width:100px; height:100px;}

为了对齐它，使用带有以下css的＃svg-region周围的包装器（我认为应该可以工作，没有测试它以垂直和水平对齐）

.wrapper{display:flex; jusfity-alignment:center; align-item:center;}

使用JS扩展和居中SVG

2 个答案: